search

antvis / X6

🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
https://x6.antv.antgroup.com
MIT License
5.76k stars 1.71k forks source link

edge路由如何智能的布局 #2639

Closed donghuizhou closed 1 year ago

donghuizhou commented 2 years ago

问题描述

image 上图中左侧部分节点使用dagre布局，edge路由使用 【manhattan】，但是edge连线并非想要的，希望效果是上图右侧部分（PS.手绘糙了点，实际应该是水平垂直的连线）

重现链接

none

重现步骤

none

预期行为

none

平台

none

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

x6-bot[bot] commented 2 years ago

👋 @donghuizhou

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

lloydzhou commented 2 years ago

试试使用port，每个节点只有上下两个port，这样再布局出来的结构或许就和你画的一样了。

donghuizhou commented 2 years ago

但是如果设定port的话，现在有nodeA和nodeB，nodeA的右port指向 nodeB 的左port，如果我把nodeA拖拽到nodeB的右侧，那nodeA的右port出来的线就会绕一大圈，指向nodeB的左port。有没有更加智能的方法规划node之间的连线

试试使用port，每个节点只有上下两个port，这样再布局出来的结构或许就和你画的一样了。

NewByVector commented 2 years ago

@donghuizhou 可以使用 targetAnchor 将连线的目标连接点固定在节点上方。targetAnchor 的配置参考 https://x6.antv.vision/zh/docs/api/registry/node-anchor

donghuizhou commented 2 years ago

@donghuizhou 可以使用 targetAnchor 将连线的目标连接点固定在节点上方。targetAnchor 的配置参考 https://x6.antv.vision/zh/docs/api/registry/node-anchor

这里是知道了我图上节点是这样排列的，所以可以设置targetNode的anchor。但实际情况下，比如下图中，如果targetNodes在SourceNode下面，并且他们离sourceNode分的比较开，x6默认将会是下面这样连线 image 像这种情况，是不是就要去判断targetNodes是否都在sourceNode下面，然后再指定从sourceNode的下面出线，从targetNodes的上面进线？ PS. 我们业务场景支持用户任意拖动node并且连线，没有强制从左往右布局或者从上到下布局，所以像图上的情况我们只能通过代码去判断sourceNode和targetNode的位置关系，再去确定连线怎么进怎么出。这种方式是否合理，有没有更好的方式？

x6-bot[bot] commented 1 month ago

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.