D3 Force Collide effect is offset while dragging - d3.js

Question

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 away from the drag start position. The farther you move from the drag start position the greater the offset.
var size = 40;
var items = [{
cx: 50,
cy: 200,
size: size,
collideR: size * 0.5
},
{
cx: 100,
cy: 200,
size: size,
collideR: size * 0.5
},
{
cx: 600,
cy: 200,
size: size,
collideR: size * 0.5
},
{
cx: 750,
cy: 200,
size: size,
collideR: size * 0.5
}
];
var alphaTarget = 0.03;
var sim;
var nodes =
d3.select(".grid-svg")
.selectAll("rect")
.data(items)
.enter()
.append("rect")
.attr("class", "grid-item-block")
.attr('x', (d) => d.cx)
.attr('y', (d) => d.cy)
.attr("width", (d) => d.size)
.attr("height", (d) => d.size)
.attr("transform", (d) => `translate(-${d.size / 2}, -${d.size / 2})`)
.call(
d3
.drag()
.on("start", (event, d) => {
if (!event.active) sim.alphaTarget(alphaTarget).restart();
d.fx = d.x;
d.fy = d.y;
sim.force(
"collide",
d3.forceCollide().radius((dc) => dc.collideR)
);
})
.on("drag", (event, d) => {
d.fx = event.x;
d.fy = event.y;
})
.on("end", (event, d) => {
if (!event.active) sim.alphaTarget(alphaTarget);
d.fx = null;
d.fy = null;
sim.force("collide", null);
})
);
sim = d3
.forceSimulation()
.alphaDecay(0.2)
.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)
);
sim.nodes(items).on("tick", () => {
nodes.attr("x", (d) => d.x).attr("y", (d) => d.y);
});
.grid-item-block {
fill: #009900;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<svg class="grid-svg" width="800" height="300"></svg>
In the example, if you drag the left block near the other 3 blocks you'll notice that the effect on block #2 is roughly symmetric, block #3 doesn't start until you start to overlap the block and is stronger on the right of block #3, and an even larger offset difference with block #4

Answer 1

I've found the underlying reason: the farther you get from the point d.cx, d.cy, the more it pulls on the block to get back. The enormous pull on the block makes d3 think that there is no reason to move the block it's colliding with. After all, after one tick, the block you're dragging will no longer overlap, because it's pulled back so hard.
I fixed this by re-initialising the centering forces, and only give them any strength if it was not the currently dragged block. Otherwise, the strength is 0 and the force is effectively not applied.
var size = 20;
var width = 400;
var height = 200;
var items = [{
cx: 2 * size,
cy: height / 2,
size: size,
collideR: size
},
{
cx: width - 2 * size,
cy: height / 2,
size: size,
collideR: size
}
];
var alphaTarget = 0.03;
var sim = d3
.forceSimulation()
.alphaDecay(0.2)
.alphaMin(0.005);
var nodes =
d3.select(".grid-svg")
.selectAll("rect")
.data(items)
.enter()
.append("rect")
.attr("class", "grid-item-block")
.attr('x', (d) => d.cx)
.attr('y', (d) => d.cy)
.attr("width", (d) => d.size)
.attr("height", (d) => d.size)
//.attr("transform", (d) => `translate(-${d.size / 2}, -${d.size / 2})`)
.call(
d3
.drag()
.on("start", function(event, d) {
if (!event.active) sim.alphaTarget(alphaTarget).restart();
d.isDragging = true;
d.fx = d.x;
d.fy = d.y;
sim.force(
"collide",
d3.forceCollide().radius((dc) => dc.collideR)
);
setForces();
})
.on("drag", (event, d) => {
d.fx = event.x;
d.fy = event.y;
})
.on("end", (event, d) => {
if (!event.active) sim.alphaTarget(alphaTarget);
d.isDragging = false;
d.fx = null;
d.fy = null;
sim.force("collide", null);
setForces();
})
);
function setForces() {
sim
.force(
"x",
d3
.forceX()
.strength((d) => d.isDragging ? 0 : 3.0)
.x((d) => d.cx)
)
.force(
"y",
d3
.forceY()
.strength((d) => d.isDragging ? 0 : 3.0)
.y((d) => d.cy)
);
}
setForces();
sim.nodes(items).on("tick", () => {
nodes.attr("x", (d) => d.x).attr("y", (d) => d.y);
});
.grid-item-block {
fill: #009900;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
<svg class="grid-svg" width="400" height="200"></svg>