vis.js - 如何避免网络图节点重叠？

Question

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

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

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

Answer 1

好吧，查看物理配置示例：如您所见，barnesHut求解器具有avoidOverlap防止重叠的属性，即使在springConstant等于 0 时也是如此。尝试这个：

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

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

从其文档中：

接受范围：[0 .. 1]。当大于 0 时，考虑节点的大小。距离将根据两个重力模型的节点包围圆的半径计算。值 1 是最大的重叠避免。

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

Answer 2

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

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