5.0.0beta版本力导向（force）布局无法避免节点重叠

[l-besiege-l]

问题描述

使用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

[github-actions]

Hi @l-besiege-l, Please star this repo if you find it useful! Thanks ⭐!
你好 @l-besiege-l。如果该仓库对你有用，可以 star 一下，感谢你的 ⭐!

[github-actions]

hi @l-besiege-l, welcome!

[l-besiege-l]

这个代码基本上参考的v5官网，仅修改了node的size字段大小以及注释了部分不相关的代码，官网示例：https://g6-next.antv.antgroup.com/zh/examples/net/forceDirected/#forceDirectedFunctionalParams

[Aarebecca]

应该是窗口空间不够，导致无论如何也不能避免节点重叠的情况发生了

[l-besiege-l]

4.8版本的force布局好像不会出现重叠，但是4.8版本的gForce布局在节点比较大时同样也会出现重叠，我看5.0版本的force布局api和4.8版本的gForce布局比较相似，是不是5.0版的force布局就是gForce布局优化后放上来的，那这应该是gForce布局算法固有的问题了，下面是4.8版本官网的force布局重叠案例，仅修改了布局名称和节点大小，上面的图是force，下面的图是gForce

[Aarebecca]

看起来有可能是布局算法的问题，回头我修复下

[l-besiege-l]

好的，麻烦您了

[JefferyMunoz]

现在解决了吗，打算升级5.0，看官网范例都没有力导向的排斥效果了

[Aarebecca]

现在解决了吗，打算升级5.0，看官网范例都没有力导向的排斥效果了

可能会稍晚一些，近期会对 5.0 进行较大调整

[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();

[ZhengZhouXu]

@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();