block by sxywu 9354026

Link Collision Avoidance

Full Screen

This is a really simple (and kind of cheap) way to ensure as little link overlap as possible in a force-directed graph. It is inspired by Moritz Stefaner‘s Force-based label placement, where he uses invisible nodes to avoid overlap of text labels.

In this example, I’ve taken the classic force-directed graph example of the Les Miserables dataset, and made two simple tweaks: I use the links array to calculate the invisible nodes, and place the nodes at the halfway point of each link. Conceptually, it is very similar to Mike Bostock‘s Curved Links.

index.html

miserables.json