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.