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>
As long as you keep track of which nodes and edges are part of the expanded area for a given node, you can always hide them by using the vis.js update function. For example, to hide a node whose id is 'id1', you could call:
(note that update expects an array as the argument). In the same way, you can hide edges by calling:
Hope this helps!
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 isfalse
for show andtrue
for hide.