d3js 缩放+拖动导致冲突

Question

我正在尝试将缩放行为应用于 svg，其中 svg 中的某些元素已经绑定了拖动行为。没有缩放行为拖动效果很好，没有拖动行为缩放效果很好。当我同时拥有它们时，它会发生冲突。当我拖动一个圆圈时，所有其他圆圈都开始随之拖动。

这里是fiddle。

谁能帮我解决这个问题？

<svg height="600" width="600" style="background: black">

<g>
    <rect x="0" y="0" , width="600" height="40" style="fill:gold;"></rect>
    <circle id='drag' cx="15" cy="20" init-cx="15" init-cy="20" r="10"
            style="stroke: white; stroke-width: 2px; fill:blue"/>

</g>

<g id="playground">
    <g>
        <circle class='top' cx="180" cy="120" r="30" style="stroke: white; stroke-width: 2px; fill:white"/>
    </g>
    <g>
        <circle class='top' cx="200" cy="220" r="30" style="stroke: white; stroke-width: 2px; fill:white"/>
    </g>
    <g>
        <circle class='top' cx="320" cy="150" r="50" style="stroke: white; stroke-width: 2px; fill:white"/>
    </g>
</g>

var zoom = d3.behavior.zoom()
        .scaleExtent([-1, 8])
        .on("zoom", function () {

            var graph = d3.select('svg');

            graph
                .select('#playground')
                .selectAll('circle')
                .select(function () {
                    return this.parentNode;
                })
                .attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        });


    var move = d3.behavior.drag()

        .on('drag', function () {

            console.log('dragging');

            var curr = d3.select(this)
                .attr({
                    cx: d3.mouse(this)[0],
                    cy: d3.mouse(this)[1]
                })


        })
        .on('dragend', function () {

            var curr = d3.select(this);

            d3.select('#playground')
                .append('circle')
                .attr({
                    cx: curr.attr('cx'),
                    cy: curr.attr('cy'),
                    r: curr.attr('r')
                })
                .style({
                    fill: 'white',
                    stroke: 'red',
                    'stroke-width': '2px'
                })
            ;

            curr.attr({
                cx: curr.attr('init-cx'),
                cy: curr.attr('init-cx')
            });
        })
        ;


    d3.select('#drag').call(move);

    d3.select('.top')
        .call(d3.behavior.drag().on('drag', function () {
            d3.select(this)
                .attr({
                    cx: d3.mouse(this)[0],
                    cy: d3.mouse(this)[1]
                })
            ;
        }));
    d3.select('svg').call(zoom);

Answer 1

我实现了节点的单独拖动以及整体缩放和平移功能。在圈子的dragstart事件中使用了stopPropagation的事件。

希望对您有所帮助。

var move = d3.behavior.drag()
    .on("dragstart", function() {
        d3.event.sourceEvent.stopPropagation();
    });

工作JSFiddle

d3js 缩放+拖动导致冲突

d3js zoom + drag causes conflict

javascript

svg

drag-and-drop

zooming

d3.js