Collide force behaves oddly during drag

[jsodeman]

Please see a video clip of the behavior here: https://imgur.com/a/Hs4iuC5

Each block is pushed into it's location by an X and Y force, and a collide force is used to pushed them apart while being dragged.

The odd behavior is that the collision gets offset, and it looks like maybe stronger, the farther you move from the drag start position.

d3.forceSimulation()
    .alphaDecay(0.02)
    .alphaMin(0.005)
    .force("x", d3.forceX().strength(3.0).x((d) => d.cx))
    .force("y", d3.forceY().strength(3.0).y((d) => d.cy))
    .force("collide", d3.forceCollide().radius((d) => d.collideR))

d3.drag().on("start", (event, d) => {
        if (!event.active) thisvue.simulation.alphaTarget(thisvue.alphaTarget).restart();
        d.fx = d.x;
        d.fy = d.y;
    })
        .on("drag", (event, d) => {
            const x = event.x;

            d.fx = x;
            d.fy = event.y;
        })
        .on("end", (event, d) => {
            if (!event.active) thisvue.simulation.alphaTarget(thisvue.alphaTarget);
            const x = event.x;
            d.fx = null;
            d.fy = null;
        }));

[Fil]

Hello,

Quite a few examples of d3-force are available at Observable and blockbuilder.

To ask for help, please use the Stack Overflow tag d3.js. Thousands of D3-related questions have been asked there, and some answers may be relevant to you.

When asking for help, please include a link to demonstrate the issue, preferably as an Observable notebook. It is often impossible to debug from code snippets (or videos) alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤖