Javascript D3.Drag.behavior没有正常工作

我用D3拖动在画布上拖动一些圆圈。然后我把它们放在固定的位置上。但是，我希望将它们与我创建的另一个svg元素保持一定距离：

 node.attr("transform", function(d,i) { return "translate ("+ arc[i].centroid() +")" +"translate("+d.x+","+d.y+")"; })

当拖动圆圈时，直到多次单击鼠标时，圆圈才会拖动&通常距离实际的鼠标手很远

我知道我可以去掉质心，但我想知道解决这个问题的方法

---

第一次尝试拖动时的跳跃是因为第57行的平移与下一行的平移不匹配。为了避免跳跃，让第57行和第76行匹配。将57改为：

d3.select(this).attr("transform", "translate ("+ arc[i].centroid() +")" +"translate("+d.x+","+d.y+")");

为了使其正常工作，我必须将d和I作为参数传递到第52行：

.on("drag", function(d, i) {

工作小提琴：