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
    }
  })
}

参考链接