antvis/G6

G6在哪里渲染数据 #5002

AFufuaa posted onGitHub

问题描述

子图布局想实现子图用树图,在自定义布局里面使用树图布局算法获取到了节点数据,但是怎么渲染出来?如果可以渲染,能否拥有树图的交互行为(展开/折叠) 使用自定义布局的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


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

posted by Yanyan-Wang over 1 year ago

是说要把这里的树图数据在转成图数据吗? <img width="787" alt="image" src="https://github.com/antvis/G6/assets/101858811/caa677cc-02a4-4b80-a685-9245c9cff5ed">

posted by AFufuaa over 1 year ago

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

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

posted by Yanyan-Wang over 1 year ago

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

posted by AFufuaa over 1 year ago

这里已经能获取到数据,我想知道怎处理这个数据给图,可以让他渲染出来(我没有使用到new TreeGraph) img_v2_b96d93b1-bd53-4bd4-bd52-5e38eebac5cg img_v2_96fb42c2-a294-4e6e-bd3a-4f56a575f31g

posted by AFufuaa over 1 year ago

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

posted by Yanyan-Wang over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests