javascript - d3.behavior.zoomのダブルクリックズームを無効にするにはどうすればよいですか？

Question

d3.behavior.zoomで、グラフをダブルクリックしてズームする機能を追加したくありません。この動作を無効にするにはどうすればよいですか？

これは、望ましくない動作をするJSFiddleです。

運が悪かったので、次のことを試しました。

 d3.behavior.zoom.dblclick = function() {};

Answer 1

ズーム動作の dblclick イベント リスナーを削除することで、ダブルクリック動作を無効にすることができます。コードを見ると、ズーム動作が SVG 要素に割り当てられています。したがって、次のように言えます。

d3.select("svg").on("dblclick.zoom", null);

または、ズーム動作を登録する場所とともに:

.call(d3.behavior.zoom().on("zoom", update)).on("dblclick.zoom", null)

また、ルート SVG 要素ではなく、ズーム動作をG 要素に移動することもできます。SVG 要素はtransform 属性をサポートしていないため、ルート SVG で正しく機能するかどうかはわかりません。

Answer 2

It's easy to set up a proxy function. Store the default (target) event, and then register a proxy event instead. The proxy will then enable / disable the target event using whatever logic you need:

svg.call(zoom);
var dblclickTarget = svg.on("dblclick.zoom");
var mouseScrollTarget = svg.on("mousewheel.zoom");

function eventProxy(fn){
  return function(){
    // Enable events if enableEvents=== true
    if(enableEvents){
      fn.apply(this, arguments)
    }
  }
};

svg.on("wheel.zoom", eventProxy(dblclickTarget))
   .on("mousewheel.zoom", eventProxy(mouseScrollTarget));

By applying the proxy pattern in this way, you can simply change the "enableEvents" variable to enable or disable the events.