G6
G6 copied to clipboard
antvis
【Question】边的渲染依赖相关几个节点的位置，应该如何渲染？
问题描述
如图，需要实现下图类似的效果。左边三个节点的边先聚合，然后再连接到目标节点。
我想到的方案是：利用折线边（polyline），增加controlPoint，可以看到，上述效果 相比普通的折线边，多了A、B两个转折点。 现在的问题是，新增转折点的x坐标很好计算，取起始点、终点之间 1/4，3/4位置即可。但是y坐标需要计算，理想的位置是上图三个聚合节点的中间位置，也就是 图中的y坐标位置。这个位置依赖于 聚合节点中 起始节点 和 最后节点的位置（x,y坐标），然后看了代码之后发现 节点 和 边 是一起渲染的，而不是 先渲染所有的点，最后渲染所有的边。这就导致 渲染聚合节点的边时 无法拿到 其他聚合节点的位置，因此y坐标无法计算。
求教是否有其他合适的方式计算y坐标 或者 可以达到类似效果的方法。🙏🙏
重现链接
无
重现步骤
如问题描述
预期行为
可以计算出y坐标位置，实现边的聚合效果
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.5.1 ... ]
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
没有完全 get 到，看你的图，所有的边的控制点的 y 应该都是和起点的 y 是一样的，不需要什么计算才对。G6 中是先渲染节点再渲染边，所以在自定义边 draw 方法中，是可以拿到 startPoint 和 endPoint 的。如果是有布局，在布局完成之后节点有了新的位置，也需要更新下边的 controlPoints
不是的， 上图中 仅“实体”是 图中的节点， 而“关系”是边上的shape， 因此每条边 都是经过4个controlPoints 转折 来实现 边的聚合效果的。 因此 需要计算出 待聚合节点的中心位置，作为第二个转折点的y坐标。 而这个中心位置 则依赖于 待聚合三个节点的坐标。 实际中发现， 渲染边时， 并不能拿到 其他不在这条边上节点的坐标。 因此好像无法实现。
写了一个满足你需求的 demo https://codesandbox.io/s/muddy-brook-ewkp9i?file=/index.js
你这里的关键就是渲染一条边时，需要知道其他边的端点的信息和坐标。因为边与边之间渲染是解耦合的，所以默认情况下在 draw 方法里面是拿不到其他边极其端点信息的。在我实现的这个 demo 里面，关键就是在 afterlayout 里面，将同一个 branch 的节点位置信息更新到了边上，这样边在 draw 方法（如果定义了 update 方法，就是 update 方法接收）就可以拿到这些信息进行 controlPoints 的计算。
