如何避免网络图节点重叠？

Question

我正在使用 Visjs 并显示带有文本的矩形节点。一些节点可以有几行文本，所以我添加了一个启发式算法来大致计算出换行符应该去哪里，以避免在非常宽但非常短的节点中出现非常宽的单行文本块。

问题是，即使打开了物理，我仍然会得到重叠的节点。

是否可以告诉布局引擎，在任何情况下（或物理模型），任何两个节点都不应重叠？

Answer 1

我用levelSeparation调整水平节点距离，nodeDistance调整垂直节点距离：

const options = {
  layout: {
    hierarchical: {
      direction: 'LR',
      sortMethod: 'directed',
      levelSeparation: 300,
    },
  },
  physics: {
    hierarchicalRepulsion: {
      nodeDistance: 140,
    },
  },
  ...
}

Answer 2

好吧，看看 physics configuration example：如您所见，barnesHut 求解器具有 avoidOverlap 属性，即使 springConstant 相等也能防止重叠归零。试试这个：

var options = {
  "physics": {
    "barnesHut": {
      "springConstant": 0,
      "avoidOverlap": 0.2
    }
  }
}

并调整常量以满足您的需要（上面链接的示例对此很有用）。

来自其文档：

Accepted range: [0 .. 1]. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.

不过要注意：我看到建议从 avoidOverlap 的低值（如 0.1）开始，以简化求解器的任务。我不记得我到底在哪里读过这篇文章。

如何避免网络图节点重叠？

How to avoid network graph nodes overlapping?

vis.js

vis.js-network