D3.js v4/5 drag 使い方
D3のドラッグイベントについて解説します。
サンプルデモ – 円をドラッグしてください。
使い方
D3のdragは、タッチイベントに対応しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
d3.selectAll(".class").call( d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ); //ドラッグスタート時に呼び出される関数 function dragstarted() { // 処理を記載 } //ドラッグ中に呼び出される関数 function dragged() { // 処理を記載 } //ドラッグ終了時に呼び出される関数 function dragended() { // 処理を記載 } |
“.class”の部分にドラッグイベントを設定したい要素のclass属性を指定してください。
内部的にはonメソッドにより”.drag”をイベントとして登録しているので、dragイベントを解除したい場合は
|
1 |
d3.selectAll(".class").on(".drag", null); |
とすれば解除できます。
イベント変数
イベントが開始されると下記のイベント変数がd3.eventに登録されます。
| target | d3.drag( )で生成したオブジェクトへの参照。 |
| type | ドラッグ操作タイプ。 “start”、“drag”、“end”のどれか。 |
| subject | ドラッグイベントに関連付けられた要素のデータobjectへの参照。 |
| x | 現在のx座標 |
| y | 現在のy座標 |
| dx | x座標の変化量 (≠ドラッグ総移動量) |
| dy | y座標の変化量 (≠ドラッグ総移動量) |
| identifier | 文字列 “mouse”、または数字のタッチ識別子。 |
| active | 現在アクティブなドラッグジェスチャーの数。 |
| sourceEvent | mousemoveやtouchmoveなどのドラッグイベントの基になる入力イベント。 |
dragstartedなどの関数内で”d3.event.target”などとすれば参照できます。
他のイベントとの対応
下記が他イベントの対応表です。start、drag、endの三つにイベントを集約してくれています。
| Event | Listening Element | Drag Event | Default Prevented? |
|---|---|---|---|
| mousedown | selection | start | no |
| mousemove | window | drag | yes |
| mouseup | window | end | yes |
| dragstart | window | – | yes |
| selectstart | window | – | yes |
| click | window | – | yes |
| touchstart | selection | start | no |
| touchmove | selection | drag | yes |
| touchend | selection | end | no |
| touchcancel | selection | end | no |
参照サイト(d3-drag)
まとめ
タッチイベントにも自動で対応しており、マルチデバイスに対応できます。D3のzoomイベントもこちらにまとめていますので参照ください。