D3.js 如何随svg组移动元素

我有一个圆，被附加在拖放上。当我用鼠标移动组时，我希望圆圈与组一起移动

以下是我尝试过但不起作用的方法：

//targetG is the group element

targetG.append("rect")
                        .attr("fill", "none")
                        .style("stroke", "black")
                        .style("stroke-width", "2px")
                        .attr("width", 200)
                        .attr("height", 200)
                        .style("fill", "white")
                        .call(
                                d3.behavior.drag()
                                .on('drag', moveRect).origin(function () {
                            var t = d3.select(this);
                            return {x: t.attr("x"), y: t.attr("y")};
                        }));

---

以下是fiddle中的完整代码：

有几个小问题需要解决

---

翻译组件拆分函数正在按进行拆分

translate=（translate.substring（0，translate.indexOf（“）”））.split（“，”）

虽然这在Chrome中有效，但在IE中应该是按空间分割的

translate = (translate.substring(0, translate.indexOf(")"))).split(",");
if (translate.length === 1)
    translate = translate[0].split(' ');

因为这个原因，圆圈没有连接到g

---

您的（容器）拖动事件将附加到g中的矩形。应将其连接到g。相应地，拖动函数应该操纵变换（平移）属性，而不是x和y

var targetG = svg.append("g")
        .attr("transform", "translate(150,150)")
        .call(
        d3.behavior.drag()
        .on('drag', moveRect).origin(function () {
        ...

及

---

原点（对于现在的g）应该是拖动开始时的（已解析的）transform（translate）属性

        ....
        var tc = d3.select(this).attr('transform').replace(/[a-z()]/g, '').split(' ');
        if (tc.length === 1)
            tc = tc[0].split(',')
        return { x: Number(tc[0]), y: Number(tc[1]) };
    }));

注意，===1检查和分割-这样它就可以在IE和Chrome中工作

---

---

Fiddle（适用于IE和Chrome）

问题是，当您尝试拖动矩形时，您没有选择圆。我做了一些修改，你们可以沿着矩形拖动圆圈

将此部分添加到代码中：

var groupAll = d3.behavior.drag()
        .origin(Object)
        .on("drag", function(d, i) {
        var child = this;
        var move = d3.transform(child.getAttribute("transform")).translate;
        var x = d3.event.dx + move[0];
        var y = d3.event.dy + move[1];
        d3.select(child).attr("transform", "translate(" + x + "," + y +   ")");

        }); 

完整的代码

var groupAll = d3.behavior.drag()
        .origin(Object)
        .on("drag", function(d, i) {
        var child = this;
        var move = d3.transform(child.getAttribute("transform")).translate;
        var x = d3.event.dx + move[0];
        var y = d3.event.dy + move[1];
        d3.select(child).attr("transform", "translate(" + x + "," + y +   ")");

        });