將元素克隆追加到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

回應更新問題-如評論中所述。

重復的原因是因為您在邊界檢查之后向targetG追加了一個新元素，而不是targetCircle。

解決此問題的最簡單方法是在像這樣添加新圓圈后簡單地刪除targetCircle

targetCircle.remove();

---

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