关于javascript:G6-TreeGraph自动收起其相邻节点

树图的层数多时，全副开展占据空间大，还会不易于查看。点击某一节点，开展此节点，主动膨胀其余同级节点及其所有子节点。如下图所示：

间接上代码：

graph.on('node:click', evt => {
    let item = evt.item
    // 动画地挪动
    graph.focusItem(item, true)

    collapseSibNode(item, false)
})

/**
 * @method: 点击 node 节点，开展此节点，膨胀其余同级节点及其所有子节点
 * @param {*} item 此节点
 * @param {*} collapsed 膨胀状态
 */
function collapseSibNode (item, collapsed) {let farNode = (item._cfg.parent && item._cfg.parent._cfg.id)
  // 同级节点
  let siblingNode

  // 以后有父节点
  if (farNode) {
    // 获取兄弟节点
    siblingNode = item._cfg.parent._cfg.children
    if (siblingNode.length > 0 && siblingNode) {collapseNode(siblingNode)
    }
  } else {
    // 以后是根节点
    collapseNode(item._cfg.children)
  }

  // 折叠开展节点
  const data = item.get("model");
  const icon = item.get("group").findByClassName("collapse-icon")

  if (collapsed) {icon.attr("symbol", G6.Marker.expand)
  } else {icon.attr("symbol", G6.Marker.collapse)
  }

  data.collapsed = collapsed
},
/**
 * @method: 递归收起节点
 * @param {*} children
 */
function collapseNode (children) {
  children.forEach(el => {const data = el.get('model');
    const icon = el.get("group").findByClassName("collapse-icon")
    if (!icon) return
    icon.attr("symbol", G6.Marker.expand)
    let isChildren = el._cfg.children && el._cfg.children.length > 0
    if (isChildren) {collapseNode(el._cfg.children)
      // 先敞开子节点后敞开父节点
      data.collapsed = true
    }
  })
}

参考链接