D3.js 如何在d3中具有不同的阻力特性

我希望组内的元素可以拖动，当我拖动父组（g元素）时，组内的元素也应该与父组一起拖动

预览：

以下是我尝试过的：

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

 //Append target circle to g element
    targetG.append("circle")
            .attr("r", 25)  //get radius from targetCircle and also styles?
            .attr("id", "circleAddedId")
            .classed("circleAddedClass", true)
            .attr("cx", d3.mouse(this)[0])
            .attr("cy", d3.mouse(this)[1])
            .style("fill", "white")
            .style("stroke", "black")
            .style("stroke-width", "2px")
            .call(
                    d3.behavior.drag()
                    .on('drag', moveCircle).origin(function () {
                var t = d3.select(this);
                return {x: t.attr("cx"), y: t.attr("cy")};
            }));

---

拖动圆时，需要停止拖动事件传播到容器

.on("dragstart", function () {
   d3.event.sourceEvent.stopPropagation();
})

---

注意-原始代码将在Chrome中工作，但在IE中不工作。翻译函数属性可以用（如Chrome）或空格（如IE）分隔

要使其在这两种情况下都能工作，您需要更改解析转换坐标的代码，以尝试使用空格拆分，如果使用拆分只返回1个元素

只需在当前拆分后添加此项

if (translate.length === 1)
    translate = translate[0].split(' ');

---

---

Fiddle-

尝试过，但组中的元素无法拖动。我只能拖动组，但不能在其中旋转。我用的是镀铬鞋垫，我的坏！我错过了关于组内元素可拖动的部分。稍后将更新答案。谢谢土豆皮。我对d3.event.sourceEvent.stopPropagation（）有一个想法但不知道它应该进入“dragstart”。我实际上是在

拖动中尝试的。无论如何，基本思想是在拖动时添加/删除组内和组外的元素。关于如何进行的任何提示？只要在拖出并将其追加回svg时再次进行边界检查即可。