d3.behavior.zoom - ズームイベントのコンストラクタを作る

投稿日:2016/03/03 / 更新日:2016/03/03

d3.jsのd3.behavior.zoomは、要素にズームイベントを設定するためのインスタンスを作成します。これだけではズームイベントは設定されません。準備段階だと思って下さい。ズーム操作が適用されると、zoomという名前を持った空のハンドラが要素に設定されたのと同じ状態になります。.zoomに対して、nullを指定すれば、ズーム操作のイベントをまとめて解除できます。

サンプルコード

<div>
	<img src="/image.png">
</div>

// ズーム操作のインスタンスを作成
var zoom = d3.behavior.zoom() ;

// div要素に対して、call()メソッドでズーム操作を適用
d3.select( "div" ).call( zoom ) ;

// 要素に適用したズーム操作を無効にする
d3.select( "div" ).on( ".zoom", null ) ;

ノート

要素のズームイベントを無効にするには？: 要素に設定したズーム操作を無効にするには、.zoomという名前に対して、nullを実行する。つまり、d3.select( "img" ).on( ".zoom", null )。