【D3.js】Drag ビヘイビア学習中。

上記サンプルは、circle要素を適当にぐりぐりドラッグすると微妙に面白い動きをします。

……まぁ、地味ですが。

こういった地味な勉強が、データビジュアライゼーションの操作感の向上などに役立つはず！と信じて最近はこんなことばかりやっています。

基本

ドラッグビヘイビアの使い方は非常に簡単でドラッグ時のコールバックを設定し、要素にcallメソッドを用いて束縛するだけです。
↓例）四角をドラッグすると動きます。

var svg = d3.select('svg');

//rect(四角形)を追加する
var rect = svg.append('rect')
	.attr({
		'width':100,
		'height':30,
		'fill': 'blue',
		'x':10,
		'y':50
	});

//ドラッグビヘイビアを用意	
var drag = d3.behavior.drag()
    .on("drag", function(d){
		//ドラッグした要素のx,y属性にマウス座標を適用させる
		d3.select(this)
		.attr({
			'x':d3.event.x,
			'y':d3.event.y
		})
	});

//ドラッグビヘイビアをrect要素に束縛する	
rect.call(drag);

var svg = d3.select('svg');

//rect(四角形)を追加する

var rect = svg.append('rect')

.attr({

'width':100,

'height':30,

'fill': 'blue',

'x':10,

'y':50

});

//ドラッグビヘイビアを用意

var drag = d3.behavior.drag()

.on("drag", function(d){

//ドラッグした要素のx,y属性にマウス座標を適用させる

d3.select(this)

.attr({

'x':d3.event.x,

'y':d3.event.y

})

});

//ドラッグビヘイビアをrect要素に束縛する

rect.call(drag);

これだけで、要素をドラッグして移動することができます。

応用

ドラッグ時のコールバックでrect要素のx,y座標を適用する際にトランジションを設定すると、ドラッグに少し遅れて追従するような面白い動きを付けることができます。

example

var svg = d3.select('svg');

//rect(四角形)を追加する
var rect = svg.append('rect')
	.attr({
		'width':100,
		'height':30,
		'fill': 'blue',
		'x':10,
		'y':50
	});

//ドラッグビヘイビアを用意	
var drag = d3.behavior.drag()
    .on("drag", function(d){
		//ドラッグした要素のx,y属性にマウス座標を適用させる
		d3.select(this)
			.transition()	//トランジションを設定する
			.attr({
				'x':d3.event.x,
				'y':d3.event.y
			})
	});

//ドラッグビヘイビアをrect要素に束縛する	
rect.call(drag);

var svg = d3.select('svg');

//rect(四角形)を追加する

var rect = svg.append('rect')

.attr({

'width':100,

'height':30,

'fill': 'blue',

'x':10,

'y':50

});

//ドラッグビヘイビアを用意

var drag = d3.behavior.drag()

.on("drag", function(d){

//ドラッグした要素のx,y属性にマウス座標を適用させる

d3.select(this)

.transition() //トランジションを設定する

.attr({

'x':d3.event.x,

'y':d3.event.y

})

});

//ドラッグビヘイビアをrect要素に束縛する

rect.call(drag);

bl.ocks.orgのサンプルは、上記コードをちょっと弄っただけです。
この用にほんの数行のコードで動きに変化を付けることができるので、いろいろ試してみると面白いかもしれません。

基本

応用

投稿者: shimizu