d3.js arrow directed graph: adding nodes/links on the fly

Question

I've tried to use this this arrow-head force directed graph example (based on d3.js)

And I want to dynamically add nodes/links to the graph, without restarting the animation.

I'm no expert of javascript, and indeed no expert of d3.js, but no matter what I tried to do, I couldn't manage to create an AddLinks(links) method, that add dynamically more links.

The best I managed to do is adding links dynamically, but those were not aware of the existence of the rest of the graph.

Of course I know what is my problem. I used the "force" method twice, separately, but i couldn't find how to interface with the already existing "force"...

Answer 1

The documentation for force.start() explicitly says

In addition, it should be called again whenever the nodes or links change.

So the way to do what you want would be to add the links to the original force layout and then restart the simulation. If you don't restart, those links won't be taken into account and the results of the simulation will look weird.

You could of course try to make seem like the simulation isn't restarted by setting the positions of the nodes to the positions at the end of the current simulation before restarting it.