G6 icon indicating copy to clipboard operation
G6 copied to clipboard

[Feat]: 自定义 vue 组件的连接桩怎么引入

Open qoioiw opened this issue 3 months ago • 3 comments

Describe the feature / 功能描述

Image

这里使用了一个的自定义节点 去使用我们的连接关系

但是因为不能精确到每一项的连接桩设置

请问大佬,如果我需要将自定义组件中的每一项都设置一个连接桩,并且可以正常的连线应该怎么设置

我注意到我们这里是有一个 placement: [number,number] 属性的,但是这种是百分比设置,在我的列很多的时候,无法精确到某一列

求助大佬们,自定义 vue 组件的连接桩怎么引入,如何精确到某一列

Are you willing to contribute? / 是否愿意参与贡献?

Please select / 请选择

qoioiw avatar Sep 02 '25 07:09 qoioiw

暂时内置边不支持,可以考虑自定义边来实现,可以参考 BaseEdge

yvonneyx avatar Sep 02 '25 10:09 yvonneyx

谢谢大佬的回复呀 @yvonneyx (怕大佬看不到偷偷 @ 一下大佬,见谅)

自定义边好像也可以尝试,不过自定义边 应该也会涉及内置连接桩吧

然后目前没找到合适的自定义vue组件内的连接桩文档

类似于我预期的中的效果

Image

现在 我直接在外面 graph 的 nodes 设置的连接桩效果是设置到一个空白图形上面的四个连接桩

Image

我想实现的是每一列都有连接桩的一个效果 这样连线,拖动之后,才不会留在原地

最终实现的效果,可以参考 antv/G6 4.8 的这个样例的一个效果

Image

链接: https://g6-v4.antv.vision/examples/item/customNode/#scrollNode

qoioiw avatar Sep 02 '25 11:09 qoioiw

不直接使用 G6 的 4.8 版本,是因为想使用的 这个 er 图和 带有 Combo 的流程图 布局嘞

Image

如果大佬们,有想法或者有更好的建议,请务必告诉我嘞,谢谢各位大佬啦,真挚的

qoioiw avatar Sep 02 '25 11:09 qoioiw