This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here’s a link to first example.
The previous example
shows how charge can influence the distance between connected nodes and
prevent the layout from achieving the desired linkDistance. That’s not
the main purpose of the charge force, however. It exists mostly to
prevent nodes from ending up “on top of each other,” which could hide
some nodes from the user.
This example highlights two nodes that have much stronger charge force
than the default. Those nodes are the red nodes. Step through the graph one
iteration at a time, watch it in slow motion, or play it at full speed using
the buttons in the upper left. You’ll see that the red nodes repel each
other more strongly than the other nodes, and they’re less likely to end
up obscuring each other in the visualization.
The following examples continue an exploration of the force layout properties.