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

問題は、要素をドラッグしようとすると、クリック イベントも発生し、両方のイベント ハンドラーが実行されることです。

クリック イベントが抑制されている場合 (つまり、ドラッグしているとき) は、クリック イベントを無視する必要があります。

クリック イベント ハンドラーを次のように変更します。

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

あなたの場合、要素をドラッグしてクリックできることを考えると、プラシャントの答えに加えて、次のようにドラッグのクリックを抑制したいと思うでしょう:

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

例については、 http://bl.ocks.org/mbostock/6123708を参照してください:-)

于 2015-09-04T17:50:20.853 に答える