在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"/>