如何在 vis.js 中隐藏图形的分支？答案

【问题标题】：How to hide graph's branch in vis.js?如何在 vis.js 中隐藏图形的分支？
【发布时间】：2017-03-29 07:03:16
【问题描述】：

我可以通过单击节点1205 来在 vis.js 中显示部分图表，但无法弄清楚如何在第二次单击同一节点时使展开的部分消失？

var nodes = new vis.DataSet([
  {id: 2696, label: "l"}, 
  {id: 1205, label: "l"}, 
  {id: 2697, label: "l"}
]);

var edges = new vis.DataSet([
  {from: 2696, to: 2697}, 
  {from: 2696, to: 1205}
]);

var container = document.getElementById('mynetwork');
var data = {
  nodes: nodes,
  edges: edges
};

var network = new vis.Network(container, data, {});
network.on("click", function(e) {
  tw_id = 1205;
  if (e.nodes[0] == tw_id) {
    sel_id = e.nodes[0];
    var node = nodes.get(e.nodes[0]);
    nodes.add([
      {id: 2021, label: "l"}, 
      {id: 2047, label: "l"}
    ]);
    edges.add([
      {from: 1205, to: 2021}, 
      {from: 1205, to: 2047}
    ]);
    nodes.update(node);
  }
});

#mynetwork {
  width: 400px;
  height: 300px;
  border: 1px solid lightgray;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
<div id="mynetwork"></div>

【问题讨论】：

标签： javascript collapse expand vis.js vis.js-network

【解决方案1】：

这是一个示例，说明如何根据 @pgoldweic 的选项以及预定义每次单击节点 1205 时显示/不显示的边和节点来实现此功能。

代码维护一个布尔值来指示下一个操作是显示还是隐藏其他节点。针对hidden 属性，false 用于显示，true 用于隐藏。

var nodes = new vis.DataSet([
  {id: 2696, label: "2696", hidden: false}, 
  {id: 1205, label: "1205", hidden: false}, 
  {id: 2697, label: "2697", hidden: false},
  {id: 2021, label: "2021", hidden: true},
  {id: 2047, label: "2047", hidden: true}
]);

var edges = new vis.DataSet([
  {id: 'e1', from: 2696, to: 2697, hidden: false}, 
  {id: 'e2', from: 2696, to: 1205, hidden: false},
  {id: 'e3', from: 1205, to: 2021, hidden: true},
  {id: 'e4', from: 1205, to: 2047, hidden: true}
]);

var container = document.getElementById('mynetwork');
var data = {
  nodes: nodes,
  edges: edges
};

var network = new vis.Network(container, data, {});

// true=hide; false=show
var toggle = false;
network.on("click", function(e) {
  tw_id = 1205;
  if (e.nodes[0] == tw_id) {
    nodes.update([
      {id: 2021, hidden: toggle},
      {id: 2047, hidden: toggle}
    ]);
    edges.update([
      {id: 'e3', hidden: toggle},
      {id: 'e4', hidden: toggle}
    ]);
    network.fit();
    // switch toggle
    toggle = !toggle;
  }
});

#mynetwork {
  width: 400px;
  height: 300px;
  border: 1px solid lightgray;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
<div id="mynetwork"></div>

【讨论】：

【解决方案2】：

只要您跟踪哪些节点和边是给定节点的扩展区域的一部分，您始终可以使用 vis.js 更新功能隐藏它们。例如，要隐藏 id 为 'id1' 的节点，可以调用：

nodes.update([{id: 'id1', hidden: true}]);

（注意 update 需要一个数组作为参数）。同样的，你可以通过调用来隐藏边：

edges.update([{id: 'edge1', hidden: true}]);

希望这会有所帮助！

【讨论】：