Question

I am trying to implement a force directed network similar to this. However, each of my nodes are assigned a group value for example

Node    Group
node1   1
node2   1
node3   2
node4   3
node5   3

And I would like the network to grow i.e. after a period of time (say 2 seconds), the subsequent node group is added with their links.

Is this attainable?

Answer 1

Yes. the trick is to encapsulate the part that draws the graph in a function. Add the specific groups after the approppriate intervals to the graph data structure and call that function. The code would look roughly like this.

function update(graph) {
    var link = svg.selectAll("line.link")
         .data(graph.links)
         .enter().append("line");

    var node = svg.selectAll("circle.node")
         .data(graph.nodes)
         .enter().append("circle")
         .call(force.drag);

    node.append("title")
         .text(function(d) { return d.name; });

    force.start();
}

You should be able to reuse everything else basically as it is.