vis.js 动态显示边缘

Question

我正在学习如何使用 vis.js 来显示网络，我想知道是否可以使用滑块动态地 show/hide 基于边属性的边, 比如它的重量。

我的意思是，它显示的是同一个滑块 here，但取决于边缘权重，一种过滤器。

提前感谢您的建议。

Answer 1

实现此目的的几个选项。 DataView 似乎最有效。

隐藏边

可以使用 hidden 属性在每个边上隐藏边，如 https://visjs.github.io/vis-network/docs/network/edges.html 中所述。这种方法循环遍历边缘并根据它们的权重属性 hides/displays 它们。生成图时会考虑隐藏边的物理特性，因此不会在滑块变化时重新排列。

此示例可在 https://jsfiddle.net/Lpofugbc/ 找到。

数据视图

DataView 可用于过滤 DataSet 并仅提供所需的边，有关 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>

vis.js 动态显示边缘

vis.js dinamically show edges

javascript

graph-visualization

vis.js

vis.js-network

隐藏边

数据视图