drag.origin - ドラッグイベントの原点座標を指定する

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

d3.jsのdrag.originは、ドラッグ操作の原点となる位置座標を指定するためのメソッドです。値は{x:n, y:n}という形のオブジェクトを戻り値とする関数で指定します。原点を設定した場合、ドラッグ操作開始時の位置座標が毎回その位置座標になります。設定しない場合は、常にドキュメントの左上が原点の位置座標となります。

サンプルコード

<div>ドラッグ対象の要素</div>

// ドラッグ操作のインスタンスを作成
var drag = d3.behavior.drag() ;

// ドラッグ操作の原点座標を指定する
drag.origin( function( d, i ) {
	// d=要素に関連付けられたデータ
	// i=インデックス番号
	// this=要素

	// x、yプロパティに座標となる数値を指定したオブジェクトを戻り値とすること
	return { x:500, y:3000 } ;
} ) ;

// [drag]をイベントハンドラとするイベントリスナーを指定しないと意味がありません
drag.on( "drag", function() {
	// ...
} ) ;

// div要素に対して、call()メソッドでドラッグ操作を適用
select( "div" ).call( drag ) ;

デモ

原点の位置座標を設定するかしないか、どちらかのボタンを押してからドラッグ操作をして、違いを確認してみて下さい。

RUN
HTML
CSS
JavaScript

<div id="target"></div> 絶対座標(x,y): [ ?, ? ] 相対座標(dx,dy): [ ?, ? ] <a id="method1">原点を{x:500,y:1500}にする</a> <a id="method2">原点を設定しない</a>

#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 eventListener = function() { // イベントオブジェクト var event = d3.event ; // X座標とY座標を取得 var x = event.x ; var y = event.y ; // X座標とY座標を取得 var dx = event.dx ; var dy = event.dy ; // 書き出す d3.selectAll( ".x" ).data( [ x, dx ] ).text( function( d ) { return d ; } ) ; d3.selectAll( ".y" ).data( [ y, dy ] ).text( function( d ) { return d ; } ) ; } // クリックイベント1 d3.select( "#method1" ).on( "click", function() { // div要素に指定してあるドラッグ操作のイベントを削除 d3.select( "#target" ).on( ".drag", null ) ; // ドラッグ操作のインスタンスを作成 var drag = d3.behavior.drag() // ドラッグの原点座標を設定する .origin( function( d, i ) { return { x:500, y:1500 } ; } ) // ドラッグ操作に対応するイベントリスナーを指定する .on( "drag", eventListener ) ; // div要素に対して、call()メソッドで新しくドラッグ操作を適用 d3.select( "#target" ).call( drag ) ; } ) ; // クリックイベント2 d3.select( "#method2" ).on( "click", function() { // div要素に指定したドラッグ操作のイベントを削除 d3.select( "#target" ).on( ".drag", null ) ; // ドラッグ操作のインスタンスを作成 var drag = d3.behavior.drag() // ドラッグ操作に対応するイベントリスナーを指定する .on( "drag", eventListener ) ; // div要素に対して、call()メソッドで新しくドラッグ操作を適用 d3.select( "#target" ).call( drag ) ; } ) ;

構文

instance = drag.origin( function )

引数

項目	説明
function	xプロパティにX座標、yプロパティにY座標の数値を指定したオブジェクトリテラル(例:`{x:100,y:500}`)。これを戻り値とする関数を引数に指定する。この関数は、第1引数に対象要素に関連付けられたデータ、第2引数にインデックス番号をとる。

戻り値

項目	説明
instance	インスタンスが戻り値となる。

ノート

関数で指定する: 引数は関数で指定しなければいけない。オブジェクトリテラルをそのまま指定しても、エラーとなる。