vis.js分层网络图布局问题

时间:2019-06-08 19:37:20

标签: javascript reactjs graph vis.js directed-graph

https://plnkr.co/edit/TqnScKGb4pJ0NdZYB5K2?p=preview这是我的图表的预览。我正在尝试在“节点2”旁边的第二层上获取“节点3”。 Vis库不应该知道并自动做到这一点,因为考虑到“节点1”具有节点2和3的两个边缘,并且使用方向UD启用了层次布局。我可以通过将level属性添加到节点来实现所需的结果,但是我正在寻找一种基于来回信息的自动方法。任何帮助将不胜感激!

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

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

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    interaction: {
        hover:true, 
        tooltipDelay: 300
    }, 
    height: '400px', 
    edges: { smooth: true, shadow: true},
    layout: {
        randomSeed: 1,
        improvedLayout: true,
        hierarchical: {
            enabled: true, //change to true to see the other graph
            direction: 'UD',
            sortMethod: 'directed'
        }
    }
};

enter image description here 当我将边缘数据集中的对象顺序更改为

var edges = new vis.DataSet([
    {from: 1, to: 2, arrows: 'to'},
    {from: 1, to: 3, arrows: 'to'},
    {from: 3, to: 2, arrows: 'to'},
    {from: 2, to: 4,arrows: 'to'}
  ]);

图形如下所示: enter image description here

库是否有一种方法可以根据边数据集计算出级别和布局。我正在尝试创建一个有向图。

0 个答案:

没有答案