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 code in the previous examples has mentioned a property that D3 calls gravity. The force layout uses this property to keep nodes from wandering off the edges of the visualization, something they might otherwise do to avoid overlap.
Unlike properties from the other examples, gravity applies to the
entire force layout and not individual links or nodes. To illustrate its
effect, therefore, this example creates two separate visualizations that
happen to reside (unbeknownst to each other) in the same SVG container.
To make this as clear as possible, the code is not at all optimized;
instead, it consists of one force layout copied and pasted as a second
one. The only difference between the two is the color (blue vs. red)
and the fact that the red layout has disabled the gravity property
by setting it to 0. (Another insignificant difference is that the
initial positions are inverted. That’s just to help see what’s happening,
and the positions are otherwise symmetrical.)
Use the controls in the upper left to execute the layout and see the different behaviors. Notice that the blue layout, with gravity enabled, tends to draw all the nodes to the center of the container. The red nodes feel no such compulsion and are free to drift off the visualization entirely.
Further examples will consider some of the other properties of the force layout.