Question

我希望组内的元素可以拖动，当我拖动父组（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")};
            }));

Answer 1

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

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

注意 - 原始代码适用于Chrome，但不适用于IE。 translate函数属性可以通过（如在Chrome中）或通过空格（如在IE中）分隔。

要使它同时工作，您需要更改解析翻译坐标的代码，如果拆分，则尝试使用空格拆分，只返回1个元素。

只需在当前分割后添加此内容

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

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

如何在d3中有不同的拖动行为

1 个答案: