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

间接上代码:

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

参考链接