Странное поведение при перетаскивании в макете Force;подпрыгивающие значения дельты х и у - PullRequest
Новая
       33

Странное поведение при перетаскивании в макете Force;подпрыгивающие значения дельты х и у

0 голосов
/ 21 октября 2018

У меня есть расклад сил.Реализовано поведение перетаскивания.При перетаскивании узла узел дрожит.После того, как мы углубились в детали, пытаясь отследить значения 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; 
}
...