antvis/G6

dagre布局如何实现折叠/展开子节点 #4808

donghuizhou posted onGitHub

问题描述

目前项目中需要dagre布局中,若节点有下一级,则在节点右边渲染个按钮,可展开/折叠下一级,请问如何实现

重现链接

none

重现步骤

none

预期行为

如上所述

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]
  • G6 版本: [4.5.1 ... ]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


这个展开收起并不能像树图那样简单,例如和节点 A 同级节点 B,C 是 A 的下一层级节点,但是 C 和 B 有边,那么理论上点击 A 就不能收起 C。可以重新考虑一下这个需求看看

posted by Yanyan-Wang over 1 year ago

可以自己编写一个查找一个节点的链路方法,查找到这个节点所有相关的链接,然后动态控制链路里的节点显隐来达到折叠/展开的效果,参考代码如下:const findLinkedPath = (nodes, edges, startNodeId) => { const result = []; const stack = [{ nodeId: startNodeId, path: [] }]; const visited = new Set(); while (stack.length > 0) { const { nodeId, path } = stack.pop(); // 找到当前节点的所有出边 const nextEdges = edges.filter(edge => edge.getModel().source === nodeId); nextEdges.forEach(edge => { if (!visited.has(edge.getModel().target)) { visited.add(edge.getModel().target); const currentNode = nodes.find(node => node.getModel().id === edge.getModel().target); if (currentNode) { stack.push({ nodeId: edge.getModel().target, path: [...path, currentNode] }); result.push(currentNode); } } }); } return result; };

posted by zyh0yh 11 months ago

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help.

这个 issue 已经被关闭,因为 它已经过期很久了。 如果你仍然需要帮助,请创建一个新的 issue。

posted by github-actions[bot] 10 months ago

Fund this Issue

$0.00
Funded

Pull requests