zoom(selection) - セレクションにズーム操作を適用する

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

d3.jsのzoom(selection)は、コンストラクタの関数で、引数に指定したセレクションが含む要素全てにズーム操作を適用します。selection.call(zoom)と同じです(…よね)。

サンプルコード

<img src="/image.png">

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

// ズーム操作に対応するイベントリスナーを指定する
zoom.on( "zoom", function() {
	// 処理内容
} ) ;

// img要素に対して、call()メソッドでズーム操作を適用
// インスタンスの名前がzoomだから、zoom() ( zoom123だったらzoom123() )
zoom( d3.select( "img" ) ) ;

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

デモ

下の「設定」のボタンを押すと、zoom(selection)を使って、画像にズーム操作を適用します。ズーム操作から情報を受け取るだけで、実際に画像はズームしません。

RUN
HTML
CSS
JavaScript

<div id="parent"> <img src="/character.png" id="target"> </div> scale: ? translate: [ ?, ? ] <a id="method1">設定</a> <a id="method2">解除</a>

#parent { text-align: center ; } #target { width: 150px ; height: 150px ; background: #D36015 ; margin: 0 auto ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; } .coordinate { margin: 4px 0 0 ; padding: 0 ; text-align: center ; }

// ズーム操作のインスタンスを作成 var zoom = d3.behavior.zoom() ; // ズーム操作に対応するイベントリスナーを指定する zoom.on( "zoom", function() { // イベントオブジェクト var event = d3.event ; // スケール (現在の倍率) var scale = event.scale ; // トランスレート (X方向、Y方向への移動距離) var tx = event.translate[0] ; var ty = event.translate[1] ; // 出力 d3.select( "#scale" ).text( scale ) ; d3.selectAll( ".translate" ).data( event.translate ).text( function( d, i ) { return d ; } ) ; } ) ; // クリックイベント1 d3.select( "#method1" ).on( "click", function() { // img要素に対して、zoom()メソッドでズーム操作を適用 zoom( d3.select( "#target" ) ) ; } ) ; // クリックイベント2 d3.select( "#method2" ).on( "click", function() { // div要素に指定したズーム操作のイベントを削除 d3.select( "#target" ).on( ".zoom", null ) ; } ) ;

構文

zoom( selection )

引数

項目	説明
zoom	インスタンスを代入した変数名。
selection	ズーム操作を適用したい要素を含んだ、d3.selectionオブジェクトを引数に指定する。

戻り値

戻り値はありません。