D3：d3.behavior.drag

Question

我正在尝试this示例，我将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 ] + ")"
            })
        });

请参阅我的示例here。

我的问题是在拖动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（）;