2

我正在尝试这个例子，我将 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 之后。

当我单击一个元素时，缩放效果不佳。

例如，根消失...

我该如何解决这种情况？

谢谢，卡洛斯。

4

3 回答 3

4

问题是，当您尝试拖动元素时，也会触发 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));
    };
于 2013-12-25T18:15:18.273 回答
2

使用这个，d3.event.sourceEvent.stopPropagation();

于 2015-12-23T10:56:58.910 回答
2

在您的情况下，可以拖动和单击一个元素，除了 prashant 的回答之外，您还需要抑制单击拖动，如下所示：

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

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

于 2015-09-04T17:50:20.853 回答