3

次のノードをクリックして vis.js にグラフの一部を表示でき1205ますが、同じノードを 2 回クリックすると展開された部分を非表示にする方法がわかりませんか?

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>

4

2 に答える 2

1

特定のノードの拡張領域の一部であるノードとエッジを追跡している限り、vis.js 更新関数を使用してそれらをいつでも非表示にすることができます。たとえば、ID が 'id1' のノードを非表示にするには、次のように呼び出します。

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

( update は引数として配列を想定していることに注意してください)。同様に、以下を呼び出してエッジを非表示にすることができます。

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

お役に立てれば！

于 2016-11-15T15:16:29.827 に答える