Блог

Главная - Вопросы по программированию - vis.js динамическое отображение краев

vis.js динамическое отображение краев

#javascript #vis.js #graph-visualization #vis.js-network

#javascript #vis.js #график-визуализация #vis.js-сеть

Вопрос:

Я учусь использовать vis.js для отображения сетей, и мне было интересно, можно ли использовать ползунок для динамического отображения / скрытия ребер на основе свойства ребра, такого как его вес.

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

Заранее спасибо за ваши предложения.

Ответ №1:

Есть несколько вариантов для достижения этой цели. Просмотр данных кажется наиболее эффективным.

Скрытые ребра

Ребра можно скрыть, используя hidden свойство для каждого ребра, как описано в https://visjs.github.io/vis-network/docs/network/edges.html . Этот подход проходит по краям и скрывает / отображает их на основе их свойства веса. Физика скрытых ребер учитывается при создании диаграммы, поэтому она не будет изменяться при изменении положения ползунка.

Этот пример можно найти по адресу https://jsfiddle.net/Lpofugbc /.

Просмотр данных

DataView можно использовать для фильтрации набора данных и предоставления только тех ребер, которые требуются. дополнительную информацию о DataView можно найти по адресу https://visjs.github.io/vis-data/data/dataview.html .

Этот подход удаляет ребра из сети, поэтому ребра, которые не отображаются, не будут учитываться их физические свойства. При перемещении ползунка диаграмма может измениться, чтобы наилучшим образом отобразить отображаемые края. Это кажется лучшим подходом, если вы не возражаете против перестройки сети, а также наиболее эффективным, поскольку для создания сети используются только соответствующие ребра.

Этот пример можно найти по адресу https://jsfiddle.net/vu6ptfjr/2 / а также ниже.

 // 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" },
  { id: 5, label: "Node 5" },
]);

// create an array with edges
// Each edge is given a weight
var edges = new vis.DataSet([
  { from: 1, to: 3, weight: 1 },
  { from: 1, to: 2, weight: 2 },
  { from: 2, to: 4, weight: 2 },
  { from: 3, to: 3, weight: 2 },
  { from: 2, to: 5, weight: 3 },
  { from: 3, to: 5, weight: 3 },
  { from: 4, to: 5, weight: 4 },
  { from: 1, to: 5, weight: 5 }
]);

// Create variable for sliderValue, set to initial value
// Update HTML slider and display with initial value
var sliderValue = 2;
document.getElementById('slider').value = sliderValue;
document.getElementById('sliderValueDisplay').innerHTML = sliderValue;

// Create a DataView which is a filtered version of the DataSet
var edgesView = new vis.DataView(edges, {
    filter: function(edge){
    // Return true if the edge should be displayed
    return (edge.weight <= sliderValue);
  }
});

// create a network
var container = document.getElementById("mynetwork");
var data = {
  nodes: nodes,
  // Set edges to DataView which is filtered, rather than the DataSet
  edges: edgesView,
};
var options = {};
var network = new vis.Network(container, data, options);

// Handler event when slider changes
document.getElementById('slider').oninput = function() {
  // Get the value of the slider and store it
  sliderValue = this.value;
  
  // Refresh the data view so the update to sliderValue takes affect 
  edgesView.refresh();
  
  // Display the selected value next to slider
  document.getElementById('sliderValueDisplay').innerHTML = sliderValue;
} 
 #mynetwork {
  width: 600px;
  /* Height adjusted for Stack Overflow inline demo */
  height: 160px;
  border: 1px solid lightgray;
} 
 <script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="0" max="5" value="0" class="slider" id="slider">
  Max Weight: <span id="sliderValueDisplay"></span>
</div>
<div id="mynetwork"></div>

Комментарии:

1. Спасибо за подробное объяснение и детали!

Метки: