Question

I was trying to visualize a graph using d3.js. I tried two layouts, bundle-radial and force.

Bundle-radial didn’t work because every node requires a parent node and it isn’t suitable for graph visualization.

For the force layout, the script hangs. Maybe it’s because there are many nodes and edges in this graph. Also i don’t need the simulation that comes with the force layout.

Is there any other layout in d3.js that i could try using ?

Answer 1

If you don’t need simulation, you can use the force layout statically. After calling force.start, call force.tick some number of times followed by force.stop to cease the simulation:

// Run the layout a fixed number of times.
// The ideal number of times scales with graph complexity.
// Of course, don't run too long—you'll hang the page!
force.start();
for (var i = n; i > 0; --i) force.tick();
force.stop();

In some cases, it may help to initialize the node positions deterministically to encourage the simulation to converge quickly on a good solution. If you don’t initialize the positions, the force layout will initialize them randomly, so it can be a bit unpredictable. For example, here I initialize the nodes along the diagonal:

// Initialize the positions deterministically, for better results.
var n = nodes.length;
nodes.forEach(function(d, i) { d.x = d.y = width / n * i; });

Lastly, if you’re using a static layout, consider using fisheye distortion to still allow interactive exploration.