G6 TreeGraph树图动态增加子节点数据

点击某个树节点,为该节点添加子节点数据,这个方法官方文档有:https://antv-g6.gitee.io/zh/d...

G6 TreeGraph树图动态增加子节点数据_第1张图片

 // 点击树节点,动态增量添加该树节点的子节点
graph.on('node:click', evt => {
let item = evt.item
// 动画地移动
graph.focusItem(item, true)

const model = item.getModel()
const subdata = [
  {
    name: 'sub1',
    children: []
  },
  {
    name: 'sub2'
  },
  {
    name: 'sub3',
    children: []
  },
  {
    name: 'sub4'
  }
]

// 问题1:处理添加的子节点收起样式 问题2:添加后首次没有同类节点收起的功能
subdata.map(item => {
  if (item.children) {
    item.collapsed = true
  }
})

if (model.children && model.children.length == 0) {
  // 添加并更新子节点
  graph.updateChildren(subdata, evt.item._cfg.id)
  // 添加的节点默认是展开的
  model.collapsed = false

  // 收起其相邻节点
  _this.collapseSibNode(item, false)
  // 重新渲染
  graph.render()
  graph.fitCenter()
}
})

你可能感兴趣的:(javascript)