D3.js: Cutting-edge Data Visualization

Adding repulsion to nodes for preventing crossed links

The means by which we attempt to prevent crossing links is to apply an amount of repulsion to each of the nodes. When the amount of repulsion exceeds the pull of the center of gravity, the nodes can move away from this point. They will also move away from the other nodes, tending to expand the result graph out to a maximum size, with the effect of causing the links to not cross.

The following example demonstrates node repulsion:

Note

bl.ock (11.3): http://goo.gl/PCHK68

This example makes two modifications to the previous example:

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

This creates a charge with a value ...