zoom.center - ズームの中心座標を取得、変更する

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

d3.jsのzoom.centerは、ズーム操作によってscaleやtranslateの値が計算される、その元となる中心の位置座標を取得したり、変更するためのメソッドです。値は第1要素がX座標、第2要素がY座標で構成される配列リテラルで指定します。初期値は、nullが設定されていて、その時のマウス(またはタッチ)の位置座標が中心座標となります。引数を指定しない場合は現在の設定を取得します。[ 0, 0 ]が要素の中心にあたり、例えば、150x150サイズの場合は、[ -75, -75 ]にすれば、左上を指定することになります。

サンプルコード

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

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

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

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

// centerの値を取得
var center = zoom.center() ;

// centerの値を変更
zoom.center( [ 10, 50 ] ) ;

// centerの値を初期値に戻す
// これについては、どうも最初と挙動が違う印象を受ける (気のせいかも…)
zoom.center( [ null, null ] ) ;

デモ

center()の挙動を確認するには、マウスホイールでの操作が一番分かりやすいです。マウスを対象の画像から離れた場所に位置させて、ホイールで拡大、縮小してみて下さい。通常はマウスの位置が中心となり、拡大すれば画像が遠ざかり縮小すれば画像が近づきます。center()で中心座標を変更すると、マウスがどの位置にあっても、常にその位置が計算の中心となり、拡大すれば画像はその位置から遠ざかり、縮小すれば画像はその位置に近づきます。途中でドラッグ操作をしてしまうと、また計算が変わってきてしまうので、最初はホイール操作だけで挙動を確認してみて下さいね。この画像の横幅は150px、高さは152pxなので、[ -75, -76 ]を指定すれば、縮小した時にちょうど左上に向かいます。

RUN
HTML
CSS
JavaScript

<div id="parent"> <img src="/character.png" id="target"> </div> scale: ? translate: [ ?, ? ] <a id="method1">[-75,-76]に設定</a> <a id="method2">リセット</a> <a id="method3">取得→?</a>

#parent { border: 1px solid #000 ; height: 250px ; overflow: hidden ; } #target { width: 150px ; height: 150px ; background: #D36015 ; transform-origin: 0 0 ; } 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 ; } ) ; // 画像を動かす d3.select( "#target" ).style( "transform", "translate( " + tx + "px, " + ty + "px ) scale( " + scale + " )" ) ; } ) ; // div要素に対して、call()メソッドでズーム操作を適用 d3.select( "div" ).call( zoom ) ; // クリックイベント1 d3.select( "#method1" ).on( "click", function() { // centerの値を変更 zoom.center( [ -75, -76 ] ) ; // scale、translateの値を元に戻す zoom.scale( 1 ) ; zoom.translate( [ 0, 0 ] ) ; // 画像を元に戻す d3.select( "#target" ).style( "transform", "translate( 0, 0 ) scale( 1 )" ) ; } ) ; // クリックイベント2 d3.select( "#method2" ).on( "click", function() { // centerの値を元に戻す zoom.center( [ null, null ] ) ; // scale、translateの値を元に戻す zoom.scale( 1 ) ; zoom.translate( [ 0, 0 ] ) ; // 画像を元に戻す d3.select( "#target" ).style( "transform", "translate( 0, 0 ) scale( 1 )" ) ; // centerの値を変更 d3.select( "#scale" ).text( "?" ) ; d3.selectAll( ".translate" ).data( [ "?", "?" ] ).text( function( d, i ) { return d ; } ) ; } ) ; // クリックイベント3 d3.select( "#method3" ).on( "click", function() { // centerの値を取得 var center = zoom.center() ; // 出力 d3.select( this ).text( "取得→" + ( center ? center.toString() : "undefined" ) ) ; } ) ;

構文

center || instance = zoom.center( [ center ] )

引数

項目	説明
center	省略可。省略した場合は値の変更ではなく、値の取得となる。引数に第1要素がX方向、第2要素がY方向の数値で構成される配列リテラルを指定すると、ズーム操作における、計算の元となる中心座標の値を変更する。`[ 0, 0 ]`が要素の左上ではなく、真ん中の位置にあたることに注意。

戻り値

項目	説明
scale	引数を指定しなかった場合、centerの値(配列)が戻り値となる。`center()`で明示的に値を指定していない場合、戻り値は配列ではなく`undefined`になることに注意。
instance	引数を指定して、centerの値に変更を加えた場合、ズーム操作のインスタンスが戻り値となる。