[SOLVED] vis.js dinamically show edges

vis.js dinamically show edges

I'm learning how to use vis.js to display networks and I was wondering whether it is possible to use a slider to dynamically show/hide edges based on an edge-property, such as its weight.

I mean, the same slider that it is shown here, but depending on edge weights, a sort of filter.

Thanks in advance for your suggestions.

Solution

A couple of options to achieve this. A DataView seems most efficient.

Hidden Edges

Edges can be hidden using the hidden property on each edge as described at https://visjs.github.io/vis-network/docs/network/edges.html. This approach loops through the edges and hides/displays them based on their weight property. The physics of hidden edges are taken into account when the diagram is generated, so it won't rearrange when the slider changes.

This example can be found at https://jsfiddle.net/Lpofugbc/.

DataView

A DataView can be used to filter the DataSet and only provide edges which are required, further information on DataView can be found at https://visjs.github.io/vis-data/data/dataview.html.

This approach removes the edges from the network, therefore the edges which are not displayed will not have their physics taken into account. When the slider moves the diagram may rearrange to best show the displayed edges. This seems like the best approach if you don't mind the network rearranging, and also most efficient as only the relevant edges are used to generate the network.

This example can be found at https://jsfiddle.net/vu6ptfjr/2/ and also below.

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