antvis / G6

♾ A Graph Visualization Framework in JavaScript.
https://g6.antv.antgroup.com/
MIT License
11.15k stars 1.33k forks source link

节点重叠,连接线遮挡 #4088

Closed guohaiping521 closed 1 year ago

guohaiping521 commented 1 year ago

问题描述

image 文案换行的时候,会出现节点重叠,连接线也会被遮挡 image 这个有什么好的解决方案吗,type 是dagre

重现链接

https://stackblitz.com/

重现步骤

如上图

预期行为

不重叠,自适应

平台

macOS

屏幕截图或视频(可选)

No response

补充说明(可选)

No response

Yanyan-Wang commented 1 year ago

nodesepFunc 根据节点高度来返回?http://g6.antv.antgroup.com/api/graphlayout/dagre#layoutcfgnodesep

不行的话提供一下在线复现 demo

guohaiping521 commented 1 year ago

只有内部需要换行的节点,才可能会出现重叠上面的情况,nodesepFunc 调整间距的话,我也不知道节点有没有重叠,我只能在重叠的时候才需要对其进行调整

guohaiping521 commented 1 year ago

文案:【选做】李四\n(啦啦啦啦啦)\n(啦啦啦啦啦)\n(啦啦啦啦啦) size: offsetWidth与offsetHeight计算

guohaiping521 commented 1 year ago

image 这样没问题 image 这样就有问题,因为有汇总节点

Yanyan-Wang commented 1 year ago

你可以在 nodesepFunc 中去判断当前节点数据中的文案有几行,来返回不同的高度。e.g.

nodesepFunc: nodeData => nodeData.label.split('\n').length * 14

这里的换行逻辑计算方式根据自己的情况进行修改

Yanyan-Wang commented 1 year ago

汇总节点什么意思,给一下在线 demo