javascript - D3js 移动嵌套组

Question

我正在尝试在组内移动嵌套的 svg 组元素。我的要求是移动大矩形及其中的所有元素，但我还需要移动要移动的大矩形内的各个组(仅在大矩形内)。我可以移动大组，但不能移动其中的组。这是fiddle和我的工作。谁能帮我？

<g id="a" transform="translate(0,0)">
    <g>
        <rect x="10" y="10" width="200" height="200" fill="red"></rect>
        <circle r="5" cx="10" cy="105" fill="blue"></circle>
        <circle r="5" cx="210" cy="105" fill="blue"></circle>
    </g>
    <g id="b" class="e" transform="translate(0,0)">
        <rect x="20" y="20" width="50" height="50" fill="black"></rect>
        <circle r="5" cx="20" cy="45" fill="blue"></circle>
        <circle r="5" cx="70" cy="45" fill="blue"></circle>
    </g>
    <g id="c" class="e" transform="translate(0,0)">
        <rect x="90" y="20" width="50" height="50" fill="black"></rect>
        <circle r="5" cx="90" cy="45" fill="blue"></circle>
        <circle r="5" cx="140" cy="45" fill="blue"></circle>
    </g>
</g>

<script>
    d3.select('#a').call(d3.behavior.drag().on('drag', function () {
        d3.select(this).attr('transform', 'translate(' + d3.event.x + ',' + d3.event.y + ')');
//        d3.event.stopPropagation();

    }));

    d3.selectAll('.e').call(d3.behavior.drag().on('drag', function () {
        d3.select(this).attr('transform', 'translate(' + d3.event.x + ',' + d3.event.y + ')');
        d3.event.stopPropagation();
    }));


</script>

Answer 1

您需要对内部框的 dragstart 事件执行 stopPropagation。

d3.selectAll('.e').call(d3.behavior.drag()
     .on('dragstart', function () {
         d3.event.sourceEvent.stopPropagation();
      })
     .on('drag', function () {
     ...

注意 - 要限制内部框的拖动区域，只需将翻译值限制为 > 0 和父框的最大尺寸(这里有一个相关问题 - Explaining Mike Bostock's d3.js dragmove function )。

顺便说一句，如果你设置了拖动原点，那么当你开始拖动时，它就不会跳跃(将左上角与鼠标位置对齐)。

<小时/>

fiddle - https://jsfiddle.net/v9487fhh/