Javascript 如何使d3的变换：平移拖动功能更平滑？

在中，我实现了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 + ")");

---

工作代码

可能会猜测d3.event.x是相对于父元素的，通过移动父元素而不是您正在拖动的元素，您可以更改d3.event.x，以便在下一个“勾选”中查看drag.subject？是的，它可以工作。也许如果我去掉div，用它来替换foreignObject会很干净。在svg中使用div是好是坏？如果使用g而不是foreignObject，则不能使用div。。我认为最好不要使用div，而是使用svgdom元素，除非您有很好的理由想使用它。