Question

I have several networks (nodes + links) that are stored in separate JSON files. I'm loading them into a Force Layout in D3.js, and individually they load and layout fine. However, I want to add the ability to load any of the files on the same page (one at a time), and have the Force Layout start over whenever a new network is loaded from the JSON file.

How do you restart the Force Layout when a new network is loaded from a JSON file? The closest I've found is http://bl.ocks.org/mbostock/1093130, but that only works with a single file.

Strange related error?

I've noticed something peculiar about the Force Layout also. If I rapidly change between the JSON files every 1 second, the Force Layout keeps laying them out properly. If I wait more than a couple seconds before switching over, then the Force Layout seems to settle on a final layout by the second network, then it stops laying out the rest of the networks from then on.

More details about the above: I realized that I'm getting an unexpected error when the Force Layout fails:

Uncaught TypeError: Cannot call method 'call' of undefined

The error appears to be internal to D3.js, at the following lines:

d3_selectionPrototype.each = function(callback) {
    return d3_selection_each(this, function(node, i, j) {
        callback.call(node, node.__data__, i, j);
    });
};
Was it helpful?

Solution

See https://github.com/mbostock/d3/wiki/Force-Layout#wiki-start

# force.start()

Starts the simulation; this method must be called when the layout is first created, after assigning the nodes and links. In addition, it should be called again whenever the nodes or links change. [...]

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top