将元素克隆附加到 d3js 中的 svg 组

Question

我可以在拖放时附加一个矩形到组，但它不能正常工作。如果我将多个矩形拖放到组上，则矩形会在不同的位置错位。我敢肯定肯定有什么地方不对劲。

演示：http://jsfiddle.net/wqvLLbLa/

代码：

var svgContainer = d3.select("body").append("svg")
                        .attr("width", 800)
                        .attr("height", 803);

                var rect = svgContainer.append("rect")
                        .attr("x", 10)
                        .attr("y", 50)
                        .attr("width", 51)
                        .attr("height", 41)
                        .attr("rx", 10)
                        .attr("stroke-width", 2)
                        .attr("stroke", "#7E7E7E")
                        .style('cursor', 'move')
                        .style("fill", "white");

                function moveRect() {
                    d3.select(this)
                            .attr('x', d3.event.x)
                            .attr('y', d3.event.y);
                }

                var dragGroup = d3.behavior.drag()
                        .origin(function () {
                            var g = this;
                            return {x: d3.transform(g.getAttribute("transform")).translate[0],
                                    y: d3.transform(g.getAttribute("transform")).translate[1]};
                        })
                        .on("drag", function (d, i) {
                            g = this;
                            translate = d3.transform(g.getAttribute("transform")).translate;
                            console.log(translate);
                            x = d3.event.dx + translate[0],
                            y = d3.event.dy + translate[1];
                            d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
                            d3.event.sourceEvent.stopPropagation();
                        });

                var group = svgContainer.append("g")
                        .attr("id", "mygroup")
                        .call(dragGroup)
                        .style('cursor', 'move')
                        .attr("transform", "translate(20, 20)");

                group.append("rect")
                        .attr("x", 250)
                        .attr("y", 250)
                        .attr("width", 151)
                        .attr("height", 141)
                        .attr("rx", 10)
                        .attr("stroke-width", 2)
                        .attr("stroke", "#7E7E7E")
                        .style("fill", "white");

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

                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 mouseCoordinates = d3.mouse(this);
                            var groupTransform = d3.transform(group.attr("transform"));
                            var groupX = groupTransform.translate[0];
                            var groupY = groupTransform.translate[1];
                            var rect = group.select("rect");
                            var rectX = +rect.attr("x");
                            var rectY = +rect.attr("y");
                            var rectWidth = +rect.attr("width");
                            var rectHeight = +rect.attr("height");

                            if (mouseCoordinates[0] > groupX + rectX
                                    && mouseCoordinates[0] < groupX + rectX + rectWidth
                                    && mouseCoordinates[1] > groupY + rectY
                                    && mouseCoordinates[1] < groupY + rectY + rectHeight) {

                                //Append new element
                                var newRect = d3.select("g").append("rect")
                                        .classed("drg", true)
                                        .attr("x", 100)
                                        .attr("y", 100)
                                        .attr("rx", 10)
                                        .attr("width", 51)
                                        .attr("height", 41)
                                        .attr("x", mouseCoordinates[0])
                                        .attr("y", mouseCoordinates[1])
                                        .style("fill", "white")
                                        .style("stroke-width", 2)
                                        .style("stroke", "#CDB483");
                            }
                            else
                            {
                                var newRect = d3.select("svg").append("rect")
                                        .classed("drg", true)
                                        .attr("x", 100)
                                        .attr("y", 100)
                                        .attr("rx", 10)
                                        .attr("width", 51)
                                        .attr("height", 41)
                                        .attr("x", mouseCoordinates[0])
                                        .attr("y", mouseCoordinates[1])
                                        .style("fill", "white")
                                        .style("stroke-width", 2)
                                        .style("stroke", "#CDB483")
                                        .call(
                                                d3.behavior.drag()
                                                .on('drag', moveRect).origin(function () {
                                            var t = d3.select(this);
                                            return {x: t.attr("x"), y: t.attr("y")};
                                        }));
                            }
                        });
                rect.call(rectDrag);

Answer 1

响应更新问题 - 就像在 cmets 中一样。

重复的原因是您在边界检查后将新元素附加到 targetG，而不是 targetCircle。

解决此问题的最简单方法是在像这样附加新圆圈后简单地删除 targetCircle

targetCircle.remove();

---

小提琴 - http://jsfiddle.net/afmLhofL/