Проблема макета иерархического сетевого графика vis.js - PullRequest
1 голос
/ 08 июня 2019

https://plnkr.co/edit/TqnScKGb4pJ0NdZYB5K2?p=preview вот предварительный просмотр графика, который я имею.Я пытаюсь получить «Узел 3» на 2-м уровне рядом с «Узлом 2».Если библиотека Vis не знает и не делает это автоматически, учитывая, что «Узел 1» имеет два ребра для Узлов 2 и 3, и иерархическое расположение включено с направлением UD.Я могу достичь желаемого результата, добавив атрибут уровня к узлам, но я ищу автоматический путь, основанный на информации о краях - туда и сюда.Любая помощь будет оценена!

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

Есть ли способ, которым библиотека вычисляет уровни и схемы на основенабор данных краев.Я пытаюсь создать ориентированный граф.

...