D3：d3.behavior.drag

Question

我正在尝试这个例子，我将d3.behavior.drag应用于该函数

var drag = d3.behavior.drag()
        .on("drag", function(d,i) {
            d.x += d3.event.dx
            d.y += d3.event.dy
            d3.select(this).attr("transform", function(d,i){
                return "translate(" + [ d.x,d.y ] + ")"
            })
        });

请看这里的例子。

我的问题是在拖动svg之后。

当我点击一个元素时，缩放不是很好。

例如，根消失了......

我该如何解决这种情况？

谢谢，卡洛斯。

Answer 1

问题是，当您尝试拖动元素时，也会触发click事件，并且两个事件处理程序都将被执行。

如果单击事件被抑制（即拖动时），则需要忽略它。

修改您的点击事件处理程序为

function click(d) {
    // Ignore the click event if it was suppressed
    if (d3.event.defaultPrevented){
     return;
    }
    path.transition()
      .duration(750)
      .attrTween("d", arcTween(d));
    };

Answer 2

在你的情况下，可以拖动和点击一个元素，除了prashant的答案，你还要按下面的方式抑制点击拖动：

 drag.on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); // silence other listeners }); 

有关示例，请参见http://bl.ocks.org/mbostock/6123708 :-)

Answer 3

使用这个，d3.event.sourceEvent.stopPropagation（）;