如何让d3的translate:translate-drag功能更加流畅？

In 这个 JSFiddle https://jsfiddle.net/sachid/8d6ht3dL/我已经在 svg 中实现了元素。我希望这组元素可以拖动，并且我已经尝试过d3.drag并使用transform:translate。拖动并不顺畅。它到处闪烁、跳跃。

其背后的原因是什么以及如何克服？

拖动函数如下：

var dragcontainer = d3.drag()
  .on("start", function() {})
  .on("drag", function(d, i) {
    var x = d3.event.x;
    var y = d3.event.y;
      d3.select(this.parentNode.parentNode).attr("transform", "translate(" + x + "," + y + ")");
  })
  .on("end", function() {});

而不是将拖动侦听器附加到外来对象 div：

d3.select("#input-container-div").call(dragcontainer);

将其添加到 svg 组中，如下所示：

d3.select(d3.select("#input-container-div").node().parentNode.parentNode).call(dragcontainer);

其次，不要使用 d3.event.x/d3.event.y

var x = d3.event.x;
var y = d3.event.y;

使用 dx 和 dy 获取鼠标移动差异并将其存储以供将来拖动。

像这样：

  this.x = this.x || 0;//reset if not there
  this.y = this.y || 0;

    this.x += d3.event.dx;
    this.y += d3.event.dy;
  d3.select(this).attr("transform", "translate(" + this.x + "," + this.y + ")");

工作代码here https://jsfiddle.net/82gwvv9q/