javascript - 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 中得到解答的解决方案(英语和巴西)，但没有任何效果

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