如何在拖放上创建组

Question

我想在拖放时克隆并创建一个组元素。一个矩形将附加到dragend上的组。

我可以创建一个矩形附加在矩形上的组，但它在drop上变得脱臼了。我想它的坐标有问题：

预览：http://jsfiddle.net/hv2v4uLj/

代码：

var rectDrag = d3.behavior.drag()
                        .origin(function ()
                        {
                            var t = d3.select(this);
                            return {x: t.attr("x"), y: t.attr("y")};
                        })

                        .on('dragend', function (d)
                        {   
                            var translate = d3.transform(this.getAttribute("transform")).translate;
                            var x = translate[0];
                            var y = translate[1];
                            //Append new element
                            var newRect = d3.select("g").append("rect")
                                    .classed("drg", true)
                                    .attr("width", 51)
                                    .attr("height", 41)
                                    .attr("x", x)
                                    .attr("y", y)
                                    .style("fill", "white")
                                    .style("stroke-width", 2)
                                    .style("stroke", "#CDB483");
                        });
                rectGroup.call(rectDrag);

Answer 1

我添加了拖动事件的代码，

.on("drag", dragged)

在第22行的rectDrag中， 并且拖动的代码在

之下

function dragged() {
  d3.select(this).attr("x", d3.event.x).attr("y", d3.event.y);
}

更新后的fiddle

希望这就是你要找的......如果不是要求更多。