zoom.translate - ズーム操作におけるtranslateの値を取得、変更する

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

d3.jsのzoom.translateは、現在のズーム操作におけるtranslateの値を取得、変更するためのプロパティです。値はX方向、Y方向、2つの値を持った配列リテラルとなります。

サンプルコード

<img src="/image.png">

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

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

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

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

// translateの値を変更 (X方向=100、Y方向=500)
zoom.translate( [ 100, 500 ] ) ;

デモ

下のボタンを押すと、zoom.translateを使って、translateの値を取得したり、変更します。取得するtranslate値は別途、小数点以下を切り捨てています。また、画像下に表示しているtranslate値はズーム操作中のものなのに対して、取得して表示するtranslate値はズーム操作が終わった後の値です。そのため、タイムラグで値がズレることがあります。これは本質に関わる部分ではないのでご了承下さい。

RUN
HTML
CSS
JavaScript

<div id="parent"> <img src="/character.png" id="target"> </div> scale: ? translate: [ ?, ? ] <a id="method1">[0,0]に変更</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 ; } ) ; } ) ; // img要素に対して、zoom()メソッドでズーム操作を適用 zoom( d3.select( "#target" ) ) ; // クリックイベント1 d3.select( "#method1" ).on( "click", function() { // translateの値を変更 (X方向=100、Y方向=500) zoom.translate( [ 0, 0 ] ) ; } ) ; // クリックイベント2 d3.select( "#method2" ).on( "click", function() { // translateの値を取得 var translate = zoom.translate() ; // それぞれの小数点以下を破棄 translate = translate.map( function( num ) { return Math.floor( num ) } ) ; // 出力 d3.select( this ).text( "取得→[ " + translate.toString() + " ]" ) ; } ) ;

構文

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

引数

項目説明

translate 省略可。省略した場合は値の変更ではなく、値の取得となる。引数に、第1要素がX方向、第2要素がY方向を示す数値で構成された配列リテラル(例:[100, 200])を指定すると、ズーム操作のtranslateの値を変更する。この変更は、対象要素を変更するものではなく、ズーム操作のインスタンス内で管理する、translateの値を変更するだけなのでご注意下さい。

項目	説明
translate	省略可。省略した場合は値の変更ではなく、値の取得となる。引数に、第1要素がX方向、第2要素がY方向を示す数値で構成された配列リテラル(例:`[100, 200]`)を指定すると、ズーム操作のtranslateの値を変更する。この変更は、対象要素を変更するものではなく、ズーム操作のインスタンス内で管理する、translateの値を変更するだけなのでご注意下さい。

戻り値

項目	説明
translate	引数を指定しなかった場合、translateの値(配列)が戻り値となる。
instance	引数を指定して、translateの値に変更を加えた場合、ズーム操作のインスタンスが戻り値となる。