Javascript 在分组元素上使用D3拖动

我正在尝试使用d3.behavior.drag函数将文本/形状拖动到不同的位置。最后，当新位置从原来的位置移动到RubyonRails运行的SQLDB中时，我希望保存新位置的变量

但是，在我尝试当前代码时，文本/形状没有移动，而是在同一位置复制：

         var drag = d3.behavior.drag()
                      .origin(Object)
                      .on("drag", function(d) {
                        d.x = d3.event.x;
                        d.y = d3.event.y;
                       draw();
                    });

然后我有一个功能“绘制”我的文本/形状和位置

                  function draw() { 

               // code is within here - check fiddle

                 }

                  draw()

我开始相信它不起作用，因为我在我的对象中使用了translate而不是x&Y：

                var node= [ {name:'amy', country: 'USA', 'translate:"translate(190,83)"}]

我看到的一些例子是这样的：

              var node= [ {name:'amy', country: 'USA', x: 100, y:0}]

我也尝试过这种方法，但当我拖动形状时，它会留下一条重复形状的轨迹

---

如果有人能解释为什么会发生这种情况，我将不胜感激/

将所有节点的转换为x和y，并进行更改

node= node.enter().append("g")
                .call(drag)

到

工作小提琴：

---

您可能需要查看此bl.ocks.org/mbostock/3808218，以确保您理解。enter（）[以及.transition（）和.exit（）]

由于每次拖动时都会添加新的形状和文本，因此您将获得粗体元素。多层次的元素使文本看起来粗体。可以通过修改拖动函数来修复此问题，这样它就可以在不再次调用draw（）的情况下更改g.node元素的位置。请看第57行和第58行：

   node.enter().append("g")
            .call(drag)
           .attr('class', 'node');