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

我已经实现了单独拖动节点以及整体缩放和平移功能。在[{1}}圈子事件中使用了stopPropagation个事件。

希望这有帮助。

dragstart

工作JSFiddle

d3js zoom + drag导致冲突

1 个答案: