G6在哪里渲染数据

[AFufuaa]

问题描述

子图布局想实现子图用树图，在自定义布局里面使用树图布局算法获取到了节点数据，但是怎么渲染出来?如果可以渲染，能否拥有树图的交互行为（展开/折叠） 使用自定义布局的init() 节点数据存在什么限制吗？ 用graph.refreshPositions();更新已有节点布局可以，传新的节点数据怎么渲染？用addItem？

重现链接

https://codesandbox.io/s/happy-wood-khtwtc?file=/index.js

重现步骤

无

预期行为

无

平台

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

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[Yanyan-Wang]

需要把自定义布局的名称配置到 graph 的 layout type 上 不过你自定义布局用了树图布局，树图布局要求树图数据格式，需要做一下数据转换再调用和返回

[AFufuaa]

是说要把这里的树图数据在转成图数据吗？

[Yanyan-Wang]

对，给到 Hierarchy 之前，转成树图数据，看这里的 data 数据结构：https://g6.antv.antgroup.com/api/tree-graph

算完之后，要把对应的 x y 写到 self.treeData.nodes 对应的节点上

[AFufuaa]

“算完之后，要把对应的 x y 写到 self.treeData.nodes 对应的节点上” 这一步是怎么实现的，我就是卡到这里了，因为我在外面是 new Graph

[AFufuaa]

这里已经能获取到数据，我想知道怎处理这个数据给图，可以让他渲染出来（我没有使用到new TreeGraph）

[Yanyan-Wang]

首先你截图还是没有先转换成树图数据。在 Hierarchy 之前，要把 self.treeData 转换成我上面给你链接的数据结构。Hierarchy 算完之后得到的 treeLayoutData 应该和链接中数据结构一样是 children 嵌套的，每个节点都有 x y 了，然后根据 id 去找在 self.treeData.nodes 里面的节点数据，把 x y 写进去