Display graph step by step on button click

[akurteva1516]

@m_hutley

function step(){
if(!mySigma) { return; } //Don’t do anything until the nodes have been set up.
var edgeinplace = mySigma.graph.edges().length;
if(edgeinplace < dictionary.edges.length) { //Prevent trying to push the button too many times.
mySigma.graph.addEdge(dictionary.edges[edgeinplace]);
mySigma.refresh();
}
}

Okay, this works with the edges perfectly but is there a way to display the nodes one by one too. would it be a for loop that goes through all nodes and finds the corresponding edge?

[m_hutley]

define the behavior you want to present. Keep in mind that an edge can only be added if both nodes it’s connected to exist first.

[akurteva1516]

instead of displaying all 3 nodes on the canvas I would like to have 1 node and then when i click nect to display the edge and the target node

[m_hutley]

So this is going to get more complex, because what you’ve said is:
On Button Click:
Add A Node
Add all Valid Edges

You’ve got a working example now, so give yourself a challenge:
Modify the existing code to do the following.

• When the graph is initialized, add only the first node.
• When the next button is pushed, add a new node, until all of the nodes are present.
• Try to figure out which edges in the dictionary are now ok to add. (the filter method may be of help to you here.)
• Add those edges.