D3.js By Example

Using link distance to spread out the nodes

These nodes in the previous example are a little too close together and we have a hard time seeing the edges. To add more distance between the nodes, we can specify a link distance. This is demonstrated by the following example:

Note

bl.ock (11.2): http://goo.gl/dd1T3O

The one modification this example makes to the previous one is that it increases the link distance to 200 (the default is 20):

var force = d3.layout.force()
    .nodes(data.nodes)
    .links(data.edges)
    .size([width, height])
    .linkDistance(200)
    .start();

This modification results in some better spacing of the nodes at the end of the simulation:

Drag ...