使用D3.js版本4设置重力中心

Question

I am trying to create a similar app as http://mbostock.github.io/d3/talk/20111018/collision.html using D3.js VERSION 4.

Here is the force used in my simulation:

    svg.on('mousemove', function() {
        let p1 = d3.mouse(this);
        root.x = p1[0];
        root.y = p1[1];
        simulation.restart();
    });
    simulation
            .force('charge_force',
                d3.forceManyBody()
            )
            .force('center_force',
                d3.forceCenter(480, 300)
            )
            .force('x_force', d3.forceX(960).strength(0.5))
            .force('y_force', d3.forceY(600).strength(0.5))
            .force('collide', d3.forceCollide(10).strength(1)
                .radius((d, i) => { return i ? d.radius : d.radius + 100; })
    );

The issue I have is that the repelled dots never return back to the center. See my screenshots below.

In the first picture, all the dots are surrounding the gravity center. After I move the mouse, the dots are repelled everywhere and do not return to their original positions.

What did I miss? Any help is really appreciated!!!

Answer 1

The issue was resolved after I changed

simulation.restart();

as

simulation.alpha(1).restart();