d3js zoom + drag导致冲突 [英] d3js zoom + drag causes conflict

问题描述

我试图应用缩放行为到svg，其中svg中的某些元素已经绑定了拖动行为。没有缩放行为拖动工作正常，没有拖动行为缩放工作正常。当我有两个它们冲突。当我拖动一个圆时，所有其他圆圈开始拖动它。

I am trying to apply the zoom behaviour to a svg where certain elements in the svg are already bound with drag behaviour. without the zoom behaviour drag works fine, without the drag behaviour zoom works fine. When I have both of them it conflicts. When I drag a circle all the other circles starts to drag with it.

这里是小提琴。

任何人都可以帮我找出问题吗？

can anyone help me to figure out the issue?

<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);

推荐答案

我已经实现了单个拖拽节点缩放和平移功能。在 dragstart 圈子事件中使用 stopPropagation

I have implemented individual dragging of nodes working along with overall zooming and panning functionality. Used stopPropagation of the event in dragstart event of circles.

希望这有帮助。

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

工作 JSFiddle

这篇关于d3js zoom + drag导致冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！