在 vis.js 中生成动态图时出现问题

Question

这个库有问题vis.js

数据是正确的（图表内部也是正确的），但在视觉上它们没有被正确表示。

例子：

红色节点与蓝色节点有连接。绿色节点与黑色节点有连接

问题：红色节点在绿色节点内部传递到蓝色节点，尽管绿色节点与蓝色节点没有连接。视觉上它表明绿色节点与蓝色节点有连接，虽然它没有。

图形配置代码：

var options = {
layout: {
  hierarchical: {
    direction: "UD",
    sortMethod: "directed"
  }
},
interaction: {dragNodes :false},
physics: {
  enabled: false
},
configure: {
  filter: function (option, path) {
    if (path.indexOf('hierarchical') !== -1) {
      return true;
    }
    return false;
  },
  showButton:false
}

图表处于分层模式：http://visjs.org/docs/network/layout.html

我已经尝试使用“物理”和其他一些在 stackoverflow 中得到解答的解决方案（英语和 BR），但没有任何效果

Answer 1

所以在 github 上看起来有很多分层有向图的布局问题。但看起来您正在尝试构建特定布局，您始终可以在每个节点上使用 level 键来确定它应该放在哪里。这是您的网络示例，但布局更正确：

// create an array with nodes
  var nodes = new vis.DataSet([
    {id: 1, label: '1', level: 0},
    {id: 2, label: '2', level: 1},
    {id: 3, label: '3', level: 1},
    {id: 4, label: '4', level: 1},
    {id: 5, label: '5', level: 2}
  ])

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 2},
    {from: 2, to: 3},
    {from: 1, to: 3},
    {from: 1, to: 4},        
    {from: 3, to: 5},
  ])

  // create a network
  var container = document.getElementById('mynetwork')
  var data = {
    nodes: nodes,
    edges: edges
  }
  var options = {    
    layout: {
      improvedLayout: true,
      hierarchical: {        
		sortMethod: 'directed'
      }
    },
    physics: false
  }
  var network = new vis.Network(container, data, options)

#mynetwork {
  width: 300px;
  height: 200px;
  border: 1px solid lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.js"></script>
<div id="mynetwork"/>