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（）;