IssueHunt5.0.0beta版本力导向（force）布局无法避免节点重叠 #5230
l-besiege-l posted onGitHub
问题描述
使用5.0.0-beta.27版本进行力导向布局，layout设置preventOverlap为true，node数据设置字段size，当节点间size差距较大时，节点会出现重合现象，设置迭代次数等参数也无法避免
重现链接
https://stackblitz.com/edit/react-ihqpi1-6fvszx?file=index.js
重现步骤
进入重现链接运行即可
预期行为
期望力导向布局可以避免节点重叠
平台
- 操作系统: Windows
- 网页浏览器: Edge
- G6 版本: 5.0.0-beta.27
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
Hi @l-besiege-l, Please star this repo if you find it useful! Thanks :star:! 你好 @l-besiege-l。如果该仓库对你有用，可以 star 一下，感谢你的 :star:!
hi @l-besiege-l, welcome!
这个代码基本上参考的v5官网，仅修改了node的size字段大小以及注释了部分不相关的代码，官网示例：https://g6-next.antv.antgroup.com/zh/examples/net/forceDirected/#forceDirectedFunctionalParams
应该是窗口空间不够，导致无论如何也不能避免节点重叠的情况发生了
4.8版本的force布局好像不会出现重叠，但是4.8版本的gForce布局在节点比较大时同样也会出现重叠，我看5.0版本的force布局api和4.8版本的gForce布局比较相似，是不是5.0版的force布局就是gForce布局优化后放上来的，那这应该是gForce布局算法固有的问题了，下面是4.8版本官网的force布局重叠案例，仅修改了布局名称和节点大小，上面的图是force，下面的图是gForce
看起来有可能是布局算法的问题，回头我修复下
好的，麻烦您了
现在解决了吗，打算升级5.0，看官网范例都没有力导向的排斥效果了
现在解决了吗，打算升级5.0，看官网范例都没有力导向的排斥效果了
可能会稍晚一些，近期会对 5.0 进行较大调整
配置 nodeSize， 调整为以下内容：
const graph = new Graph({
container: 'container',
width,
height,
layout: {
type: 'force',
preventOverlap: true,
nodeSize: (d) => {
return d.style.size * 2;
},
},
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
data: {
nodes: [
{ id: 'node0', style: { size: 50 } },
{ id: 'node1', style: { size: 50 } },
{ id: 'node2', style: { size: 30 } },
{ id: 'node3', style: { size: 300 } },
{ id: 'node4', style: { size: 30 } },
{ id: 'node5', style: { size: 300 } },
{ id: 'node6', style: { size: 150 } },
{ id: 'node7', style: { size: 15 } },
{ id: 'node8', style: { size: 15 } },
{ id: 'node9', style: { size: 150 } },
{ id: 'node10', style: { size: 15 } },
{ id: 'node11', style: { size: 150 } },
{ id: 'node12', style: { size: 15 } },
{ id: 'node13', style: { size: 15 } },
{ id: 'node14', style: { size: 15 } },
{ id: 'node15', style: { size: 15 } },
{ id: 'node16', style: { size: 150 } },
],
edges: [
{ source: 'node0', target: 'node1' },
{ source: 'node0', target: 'node2' },
{ source: 'node0', target: 'node3' },
{ source: 'node0', target: 'node4' },
{ source: 'node0', target: 'node5' },
{ source: 'node1', target: 'node6' },
{ source: 'node1', target: 'node7' },
{ source: 'node2', target: 'node8' },
{ source: 'node2', target: 'node9' },
{ source: 'node2', target: 'node10' },
{ source: 'node2', target: 'node11' },
{ source: 'node2', target: 'node12' },
{ source: 'node2', target: 'node13' },
{ source: 'node3', target: 'node14' },
{ source: 'node3', target: 'node15' },
{ source: 'node3', target: 'node16' },
],
},
});
graph.render();
@Aarebecca 在节点设置比较大的时候，似乎还是会重叠
配置 nodeSize， 调整为以下内容：
const graph = new Graph({ container: 'container', width, height, layout: { type: 'force', preventOverlap: true, nodeSize: (d) => { return d.style.size * 2; }, }, behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'], data: { nodes: [ { id: 'node0', style: { size: 50 } }, { id: 'node1', style: { size: 50 } }, { id: 'node2', style: { size: 30 } }, { id: 'node3', style: { size: 300 } }, { id: 'node4', style: { size: 30 } }, { id: 'node5', style: { size: 300 } }, { id: 'node6', style: { size: 150 } }, { id: 'node7', style: { size: 15 } }, { id: 'node8', style: { size: 15 } }, { id: 'node9', style: { size: 150 } }, { id: 'node10', style: { size: 15 } }, { id: 'node11', style: { size: 150 } }, { id: 'node12', style: { size: 15 } }, { id: 'node13', style: { size: 15 } }, { id: 'node14', style: { size: 15 } }, { id: 'node15', style: { size: 15 } }, { id: 'node16', style: { size: 150 } }, ], edges: [ { source: 'node0', target: 'node1' }, { source: 'node0', target: 'node2' }, { source: 'node0', target: 'node3' }, { source: 'node0', target: 'node4' }, { source: 'node0', target: 'node5' }, { source: 'node1', target: 'node6' }, { source: 'node1', target: 'node7' }, { source: 'node2', target: 'node8' }, { source: 'node2', target: 'node9' }, { source: 'node2', target: 'node10' }, { source: 'node2', target: 'node11' }, { source: 'node2', target: 'node12' }, { source: 'node2', target: 'node13' }, { source: 'node3', target: 'node14' }, { source: 'node3', target: 'node15' }, { source: 'node3', target: 'node16' }, ], }, }); graph.render();