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

d3 drag example

example

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

……まぁ、地味ですが。

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

基本

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

example

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

応用

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

example

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