All examples By author By category About

sathomas

Understanding D3.js Force Layout - 6: charge (continued)

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.