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:

Using link distance to spread out the nodes

Drag ...

Get D3.js By Example now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.