G6 icon indicating copy to clipboard operation
G6 copied to clipboard

力导向图如何配置线不重合

Open qzcyy opened this issue 2 years ago • 2 comments

问题描述

image 在力导向图jie节点较少的情况下,同一个主节点的线会重合,比如图上id=1和id=2的节点都是属于id=0的主节点,但是视觉上并不能直观的确定id=2的节点的主节点是id=1还是id=0,请问如何避免这种情况的发生,或者能不能像echarts一样布局时施加一个转动的力让这种会显示在一条线上的节点尽量分开

重现链接

https://codesandbox.io/s/g607fp?file=/index.js

重现步骤

进入页面,查看展示效果

预期行为

我期望看到不同的边不会重合

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]
  • G6 版本: [4.5.1 ... ]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response

qzcyy avatar May 07 '22 09:05 qzcyy

感谢建议。出现这个的原因是在进行了 force 布局之前,会初始化为 grid 布局。而节点比较少的时候,这些节点恰好在 grid 布局中的一行,所以没能达到一个分开的效果。我们后面会为布局增加 preset 预布局,可以自由配置。目前,可以通过在数据中初始化 random 的 x y 来达到你想要的效果,比如在读取数据之前:

data.nodes.forEach(node => { node.x = Math.random(); node.y = Math.random() })

Yanyan-Wang avatar Jun 16 '22 09:06 Yanyan-Wang

您好,我也遇到同样问题,想请教一下 您最后是怎么解决的

dearbady avatar Aug 11 '22 07:08 dearbady

布局已支持配置 preset,你可以在 layout 中配置 preset: { type: 'random' } 或 circular 等其他布局类型

Yanyan-Wang avatar Dec 26 '22 08:12 Yanyan-Wang