web-dev-qa-db-ja.com

d3.behavior.zoomのダブルクリックズームを無効にする方法は？

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

これは、不要な動作を伴う JSFiddle です。

私は運なしで以下を試しました。

 d3.behavior.zoom.dblclick = function() {};
javascriptd3.js
42
Brant Olsen

ダブルクリック動作を無効にするには、ズーム動作の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で正しく機能するかどうかはわかりません。

94
mbostock

プロキシ機能の設定は簡単です。デフォルト（ターゲット）イベントを保存し、代わりにプロキシイベントを登録します。プロキシは、必要なロジックを使用してターゲットイベントを有効/無効にします。

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));

この方法でプロキシパターンを適用することにより、「enableEvents」変数を変更してイベントを有効または無効にすることができます。

3
AJ Hurst