连接的节点与其他边或节点重叠

Question

我正在使用vis.js来显示节点，并非所有节点都相互连接，但如图所示它们是重叠的，有没有办法避免这种情况，我去了通过配置选项找不到。

Answer 1

在像 BarnesHut 这样的一些物理学中有一个属性 avoidOverlap=[0,1] http://visjs.org/docs/network/physics.html?#

你可以在底部的物理下试试http://visjs.org/examples/network/other/configuration.html

喜欢将此属性添加到您的物理选项中

var options = {
 ... "physics": {
    "barnesHut": {
      "avoidOverlap": 1
    },
  }
}

Answer 2

我设法通过使用 configure 选项让它工作：

configure: {
        enabled: true,
        showButton: true
}

这向您展示了一个模式来配置所有选项，直到图表看起来不错。

在我使用分层视图的情况下，我不得不禁用物理并设置如下布局：

layout: {
  hierarchical: {
    enabled: true,
    nodeSpacing: 425,
    blockShifting: false,
    edgeMinimization: false,
    sortMethod: "directed"
  }
}

Answer 3

我建议对物理和布局使用手动配置：

configure: {
  enabled: true,
  filter: 'physics, layout',
  showButton: true
}

并试着玩 nodeDistance 和 nodeSpacing.

Answer 4

我尝试了很多选项，发现它实际上取决于物理配置：如果你的物理配置是这样的

physics: false，那么你可以只用这个布局： { 分层：{ 水平分离：150，树间距：200，块移位：是的，边缘最小化：真， parentCentralization: true, 方向：'UD'，节点间距：300， sortMethod: "directed" //directed,hubsize } },

其中 nodeSpacing 是您的关键，sord 方法将为您定义结构这构成了这样一个网络：

否则使用手动配置：

配置：{ 启用：真，过滤器：'physics, layout'，显示按钮：真 }

连接的节点与其他边或节点重叠

Connected nodes overlapping other edges or nodes

vis.js

vis.js-network