This variation of a clustered force layout uses an entry transition and careful initialization to minimize distracting jitter as the force simulation converges on a stable layout.
By default, D3’s force layout randomly initializes node positions. You can prevent this by setting each node’s x and y properties before starting the layout. In this example, because custom forces cluster nodes by color, most of the initial jitter is caused by the initial random placement overlapping clusters. We can reduce the jitter by initially placing nodes of the same color near other.
The number of clusters in this example is defined by the variable m; the local variable i is the node’s cluster number. To initialize clusters in a circle of radius 200px around the canvas center, we can define x and y like so:
x: Math.cos(i / m * 2 * Math.PI) * 200 + width / 2 + Math.random(),
y: Math.sin(i / m * 2 * Math.PI) * 200 + height / 2 + Math.r