乐趣区

关于javascript:G6-TreeGraph树图动态增加子节点数据

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

 // 点击树节点,动静增量增加该树节点的子节点
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()}
})
退出移动版