All examples By author By category About

sathomas

Understanding D3.js Force Layout - 4: linkDistance

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.

Earlier examples looked at the operation of force layout from a (very) high level. This example begins examining the important properties of the force layout in more detail.

Perhaps the most important property is the linkDistance. This property specifies the distance that we would like between any two connected nodes. The force layout, through its iterations, will try to arrange the nodes so that all links are approximately this distance, but that won't always be possible. Even when it is technically able to make all links the desired distance, the resulting visualization may have other undesirable properties. Too many links may cross each other, for example. In such cases the layout will do it's best.

The visualization shows two separate network graphs that will be processed by force layout. The only difference between the two is that the graph on the left has a linkDistance twice that of the graph on the right. Use the buttons in the upper left to control the layout and see if it can achieve the desired distances.

The following examples continue an exploration of the force layout properties.