The issue has been closed

讨论：如何实现单点扩展布局 #4966

AFufuaa posted onGitHub

问题描述

现有的外层是Force 力导向布局，数据是图数据。后期希望可以点击某个节点时树图展开，并且树图节点可以与外层节点关联，怎么实现类似的功能。 <img width="923" alt="image" src="https://github.com/antvis/G6/assets/101858811/7779f86a-0ef2-477f-a7e6-8a02a8751f8e"> <img width="1029" alt="image" src="https://github.com/antvis/G6/assets/101858811/d242dc97-e47a-4240-a248-98e2ad5ca082">

重现链接

无

重现步骤

无

预期行为

想知道实现类似功能的可行性，如果可行，该采用什么实现方案。

平台

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

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

我昨天刚做的，可以参考图标示例->一般图场景案例的倒数第二个的做法，在这个基础上进行改进

posted by 7hao123 over 1 year ago

我昨天刚做的，可以参考图标示例->一般图场景案例的倒数第二个的做法，在这个基础上进行改进

展开的树形图用grid布局写嘛？位置咋确定呢（怎么实现上一层数据的居中啊）

posted by AFufuaa over 1 year ago

可以两部分用子图布局来做 https://g6.antv.antgroup.com/examples/net/layoutMechanism/#subgraphLayout 树图那部分用树图布局 https://g6.antv.antgroup.com/examples#tree-compactBox 背景部分是力导布局 https://g6.antv.antgroup.com/examples/net/forceDirected/#basicForce2 因为整体是 Graph，所以展开收起需要自己控制数据。然后点击节点相关节点高亮就是状态的控制 https://g6.antv.antgroup.com/manual/advanced/state-new，并且可通过 graph.addItem graph.removeItem 增减临时的虚线边。

posted by Yanyan-Wang over 1 year ago

请问支持将部分节点用树图布局绘制嘛，因为我看子图布局就是动态的筛选节点用另一种布局绘制，但是好像不支持树图

posted by AFufuaa over 1 year ago

可以的，树图布局本质上也是计算节点的 x y，只不过它需要接受的是 TreeGraph 的数据类型，就是 children 嵌套的那种。你可以做一下转换，然后给到树图布局算法，引用和使用方式可以参考这里：

https://github.com/antvis/G6/blob/6a340cf87493fc0b207407331d6e9f960781d3a1/packages/pc/src/graph/tree-graph.ts#L3C8-L3C17

https://github.com/antvis/G6/blob/6a340cf87493fc0b207407331d6e9f960781d3a1/packages/pc/src/graph/tree-graph.ts#L58

posted by Yanyan-Wang over 1 year ago

为啥这个树图数据渲染不出来呢？是这样使用嘛 🥲🥲 https://codesandbox.io/s/happy-wood-khtwtc?file=/index.js

posted by AFufuaa over 1 year ago

😩😩用树图布局算法获取节点数据后，怎么渲染啊？用addItem嘛，这样好像不行

posted by AFufuaa over 1 year ago

好像新开了 issue 针对这个问题是吧，在那个 issue 讨论吧

posted by Yanyan-Wang over 1 year ago

Fund this Issue

$0.00

Funded

Pull requests

讨论：如何实现单点扩展布局 #4966

问题描述

重现链接

重现步骤

预期行为

平台

屏幕截图或视频（可选）

补充说明（可选）

Company

Community

Support

Connect