javascriptvis.jsvis.js-network

How to hide graph's branch in vis.js?


I am able to display part of the graph in vis.js by clicking on the node 1205 with the following but cannot figure out how to make the expanded part disappear on a second click on the same node?

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>


Solution

  • Here's an example of how to implement this based on @pgoldweic's option plus pre-defining the edges and nodes that will be shown/ unshown per click on node 1205.

    The code maintains a boolean to indicate whether the next action is show or hide the other nodes. Against the hidden property it is false for show and true for hide.

    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>