vis.js 动态显示边缘

Posted 2023-03-27

【中文标题】vis.js 动态显示边缘

【英文标题】：vis.js dinamically show edges

【发布时间】：2022-01-09 17:10:09

【问题描述】：

我正在学习如何使用 vis.js 来显示网络，我想知道是否可以使用滑块根据边缘属性（例如其权重）动态显示/隐藏边缘。

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

提前感谢您的建议。

【参考方案1】：

有几个选项可以实现这一点。 DataView 似乎最有效。

隐藏的边缘

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

这个例子可以在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>

【讨论】：

感谢您的详细解释和详细说明！