D3 force layout differences between v3 and v4 when using mutliple connected components

Question

MWEs

I tried to create the same graph with both version, here are the Bl.ocks:

• v3
• v4

These examples are adapted from one of the official examples.

Issue

Differences arises when there is more than one connected component. There are two things in particular that don't work for me in version 4:

1. dragging one connected component makes the others to translate wildly around (I guess) the force center, in a very non-physics way;

2. on mouse down (even without actually moving) the other connected components move away indefinitely, eventually off screen.

In short, graphs in version 3 are unbreakable, no matter how much you mess with nodes they will eventually return into a stable position.

How can I fix these two behaviors, making the simulation more similar to version 3?

Answer 1

You don't want d3.forceCenter. If you look at the API:

The centering force translates nodes uniformly so that the mean position of all nodes (the center of mass if all nodes have equal weight) is at the given position ⟨x,y⟩

This means that, when you move a node away from the center, the other nodes will move in the opposite direction, to compensate the movement, so the center of mass stays at the same position.

Instead, use forceX and forceY:

The x- and y-positioning forces push nodes towards a desired position along the given dimension with a configurable strength.

So, this is the simulation:

const simulation = d3.forceSimulation()
     .force('link', d3.forceLink().distance(200))
     .force('charge', d3.forceManyBody())
     .force('centerX', d3.forceX(width / 2))
     .force('centerY', d3.forceY(height / 2));

Here is an updated fiddle: https://jsfiddle.net/ahdbLL8a/