javascript - 使用 d3.mouse(this) 拖动元素会导致元素闪烁

Question

我在相对定位的 div 中有一条绝对定位的引导线。当鼠标使用 d3 移动时，我需要水平移动引导线。由于 d3.event 需要将元素定位在 g 元素中，因此我尝试使用 d3.mouse 来移动引导线。但是，拖动行为非常不稳定并且闪烁过多。我似乎无法弄清楚是什么原因造成的。

var drag = d3.behavior
  .drag()
  .on('drag', function(event) {
    dragMoveNew(this);
})

d3.select(".grid").call(drag);

function dragMoveNew(elem) {
     var x = d3.mouse(elem)[0];

   $(elem).css('left', x);
}

这是jsfiddle链接

https://jsfiddle.net/u4koenra/

标签： javascriptjqueryd3.jsdrag

Answer 1

利用d3.event.x

function dragMoveNew(elem) {
   //var x = d3.mouse(elem)[0];
   var x = d3.event.x;

   $(elem).css('left', x);
}