Accepted answer

The reason for this is that d3.json is asynchronous. That is, the callback is not executed immediately, but when the call to get the JSON returns. What this means is that the block of code to initialise and start the force layout is run before the nested d3.json calls return and add the data.

This is not a problem as such -- you can certainly add new items to the arrays you give to force.nodes() and force.links(). The problem is that the positions of these new items are not initialised, and that only happens on force.start(). So after adding new nodes/links, you need to start the force layout again.

You should be able to fix this in your code by declaring force further up and calling force.start() at the end of each nested callback.

Related Query