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 of -5000
, meaning that the nodes actually repulse each other. There is also a smaller link distance, as the repulsion will push the nodes apart quite a bit, therefore stretching the links. Leaving the links at 200
would make...