力布局中的奇怪拖动行为；跳动delta x和y值

Question

我有一个强制布局。实现了拖动行为。拖动节点时，节点会抖动。在深入研究细节之后，尝试跟踪d3.event.dx和d3.event.dy的值，这些值似乎以一种奇怪的方式晃动。

这是控制台，我正在记录整个拖动事件。拖动在x轴上向右移动（正dx），在y轴上几乎没有变化。请注意x和dx的值；值增加和减少，奇怪的是，导致拖动时节点的抖动外观！是什么原因呢？ （拖动的总体结果在所需的方向上。）

PS。使用d3.mouse（）会产生类似的 shaking 行为。

{type: "drag", x: 7.858573913574219, y: -1.441253662109375, dx: 1, dy: 0, …}
{type: "drag", x: 14.858573913574219, y: -1.441253662109375, dx: 7, dy: 0, …}
{type: "drag", x: 14.858573913574219, y: 0.558746337890625, dx: 0, dy: 2, …}
{type: "drag", x: 21.85857391357422, y: -0.441253662109375, dx: 7, dy: -1, …}
{type: "drag", x: 15.858573913574219, y: 1.558746337890625, dx: -6, dy: 2, …}
{type: "drag", x: 32.85857391357422, y: -0.441253662109375, dx: 17, dy: -2, …}
{type: "drag", x: 27.85857391357422, y: 2.558746337890625, dx: -5, dy: 3, …}
{type: "drag", x: 40.85857391357422, y: 0.558746337890625, dx: 13, dy: -2, …}
{type: "drag", x: 31.85857391357422, y: 3.558746337890625, dx: -9, dy: 3, …}
{type: "drag", x: 44.85857391357422, y: 0.558746337890625, dx: 13, dy: -3, …}
{type: "drag", x: 42.85857391357422, y: 3.558746337890625, dx: -2, dy: 3, …}
{type: "drag", x: 50.85857391357422, y: 0.558746337890625, dx: 8, dy: -3, …}
{type: "drag", x: 53.85857391357422, y: 3.558746337890625, dx: 3, dy: 3, …}
{type: "drag", x: 55.85857391357422, y: 0.558746337890625, dx: 2, dy: -3, …}
{type: "drag", x: 61.85857391357422, y: 3.558746337890625, dx: 6, dy: 3, …}
{type: "drag", x: 66.85858154296875, y: 0.558746337890625, dx: 5.000007629394531, dy: -3, …}
{type: "drag", x: 65.85856628417969, y: 4.558746337890625, dx: -1.0000152587890625, dy: 4, …}
{type: "drag", x: 70.85858154296875, y: 1.558746337890625, dx: 5.0000152587890625, dy: -3, …}
{type: "drag", x: 77.85856628417969, y: 6.558746337890625, dx: 6.9999847412109375, dy: 5, …}
{type: "drag", x: 80.85858154296875, y: 3.558746337890625, dx: 3.0000152587890625, dy: -3, …}
{type: "drag", x: 80.85856628417969, y: 6.558746337890625, dx: -0.0000152587890625, dy: 3, …}
{type: "drag", x: 90.85858154296875, y: 4.558746337890625, dx: 10.000015258789062, dy: -2, …}
{type: "drag", x: 86.85856628417969, y: 8.558746337890625, dx: -4.0000152587890625, dy: 4, …}
{type: "drag", x: 99.85858154296875, y: 4.558746337890625, dx: 13.000015258789062, dy: -4, …}
{type: "drag", x: 90.85856628417969, y: 8.558746337890625, dx: -9.000015258789062, dy: 4, …}
{type: "drag", x: 103.85858154296875, y: 4.558746337890625, dx: 13.000015258789062, dy: -4, …}
{type: "drag", x: 101.85856628417969, y: 8.558746337890625, dx: -2.0000152587890625, dy: 4, …}
{type: "drag", x: 110.85858154296875, y: 4.558746337890625, dx: 9.000015258789062, dy: -4, …}
{type: "drag", x: 111.85856628417969, y: 8.558746337890625, dx: 0.9999847412109375, dy: 4, …}
{type: "drag", x: 117.85858154296875, y: 4.558746337890625, dx: 6.0000152587890625, dy: -4, …}

这是代码的一部分；很抱歉，我没有提供完整的代码，但是要重现一个最小的示例有些困难，我认为这没有关系。

var node_drag = d3.behavior.drag()
.on("dragstart", dragstart)
.on("drag", dragmove)
.on("dragend", dragend);

function dragstart(d, i) {
    force.stop();
}

function dragmove(d, i) {   

    d.px += d3.event.dx;
    d.py += d3.event.dy;

    d.x += d3.event.dx;
    d.y += d3.event.dy; 

    circle
    .attr("cx", d.x)
    .attr("cy", d.y);

    circle.attr('transform', function(d) {
      return 'translate(' + d.x + ',' + d.y + ')';       
    });
}

function dragend(d, i) {
    d.fixed = true;
    force.resume();
}

function releasenode(d) {
    d.fixed = false; 
}