just playing around with vis.js for a day now and been through all the docs and examples. I'm trying to figure out the best way to refresh my node and edge data with click events. E.g. say I have one node with no edges, then I click it to add 3 child nodes. Could a vis.js expert suggest best way to do this?

Expected Before:

nodes = [{id: 1,   label:"Parent Node"} ];
edges = [ ];

Expected After click on id 1:

nodes = [{id: 1,   label:"Parent Node"},
{id: 2,   label:"Child Node1"},
{id: 3,   label:"Child Node2"},
{id: 4,   label:"Child Node3"} ];
edges = [ {from: 1, to: 2},
          {from: 1, to: 3},
          {from: 1, to: 4} ];

Then I'd want to collapse and go back to just the parent node w/ no children. I get how to do the event handling, it's the updating and redrawing of the nodes and edges I'm not sure about.

just playing around with vis.js for a day now and been through all the docs and examples. I'm trying to figure out the best way to refresh my node and edge data with click events. E.g. say I have one node with no edges, then I click it to add 3 child nodes. Could a vis.js expert suggest best way to do this?

Expected Before:

nodes = [{id: 1,   label:"Parent Node"} ];
edges = [ ];

Expected After click on id 1:

nodes = [{id: 1,   label:"Parent Node"},
{id: 2,   label:"Child Node1"},
{id: 3,   label:"Child Node2"},
{id: 4,   label:"Child Node3"} ];
edges = [ {from: 1, to: 2},
          {from: 1, to: 3},
          {from: 1, to: 4} ];

Then I'd want to collapse and go back to just the parent node w/ no children. I get how to do the event handling, it's the updating and redrawing of the nodes and edges I'm not sure about.

• javascript
• chap-links-library

Share Improve this question Follow edited Mar 2, 2015 at 12:58 laaposto 12.2k1515 gold badges5858 silver badges7272 bronze badges asked Feb 18, 2015 at 23:09 tkellytkelly 64266 silver badges1313 bronze badges 1

• have you found any way to do this.Need help! – Shashank Commented Feb 28, 2017 at 19:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Once I posted I figured out my mistake, not using the dynamic DataSet(). So it should be like this:

var nodes = new vis.DataSet([{id: 1,   label:"Parent Node"}]);
var edges = new vis.DataSet([]);

Then you can update like so:

nodes.update({id: 2,   label:"Child Node1"});
nodes.update({id: 3,   label:"Child Node2"});
nodes.update({id: 4,   label:"Child Node3"});

edges.update({from: 1, to: 2});
edges.update({from: 1, to: 3});
edges.update({from: 1, to: 4});