Проблема при генерации динамического графика в vis.js

#javascript #graph #vis.js

#javascript #График #vis.js

Вопрос:

У меня проблема с этой библиотекой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

Я уже пробовал использовать «physics» и некоторые другие решения, на которые были даны ответы здесь, в stackoverflow (английский и BR), но ничего не сработало

1. у вас есть скрипка или пример, с которым мы могли бы поиграть?

2. к сожалению, нет, это внутреннее программное обеспечение, которое я редактирую, и мне не разрешили добавлять что-либо за пределы настроек

Ответ №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"/>