树图的层数多时,全副开展占据空间大,还会不易于查看。点击某一节点,开展此节点,主动膨胀其余同级节点及其所有子节点。如下图所示:
间接上代码:
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 } })}
参考链接