D3.js dragの使い方 - d3.drag()
D3のドラッグイベントについて説明する。
サンプルプログラム
使い方
D3のdragはタッチイベントをサポートしている。
d3.selectAll("div")
.call(
d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
// ドラッグ開始時に呼び出される関数
function dragstarted(event) {
// 処理内容
}
// ドラッグ中に呼び出される関数
function dragged(event) {
// 処理内容
}
// ドラッグ終了時に呼び出される関数
function dragended(event) {
// 処理内容
}
"div"の部分に、ドラッグイベントを設定したい要素を指定する。内部的にはon(...)メソッドによってdragをイベントとして登録している。
dragイベントを解除したい場合は、次のように解除できる。
d3.selectAll("div")
.on(".drag", null);
イベント変数
イベントが開始されると、次のイベント変数がeventに登録される。
target |
d3.drag()で生成したオブジェクトへの参照。 |
type |
ドラッグ操作の種類。start、drag、end |
subject |
ドラッグイベントに関連する要素のデータオブジェクトへの参照。 |
x |
現在のx座標 |
y |
現在のy座標 |
dx |
x座標の変化量(ドラッグの総移動量ではない) |
dy |
y座標の変化量(ドラッグの総移動量ではない) |
identifier |
文字列"mouse"、または数値のタッチ識別子。 |
active |
現在アクティブなドラッグジェスチャーの数。 |
sourceEvent |
mousemoveやtouchmoveなど、ドラッグイベントの基礎となる入力イベント。 |
dragstartedなどの関数内でevent.targetを参照できる。
他のイベントとの対応
次が他のイベントとの対応表である。start、drag、endの3つのイベントにまとめている。
| 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 | GitHub
まとめ
タッチイベントにも自動的に対応しているため、複数のデバイスに対応できる。D3のzoomイベントもここにまとめているので参照する。