D3.js v4/5 drag 使い方

2018-02-04

D3のドラッグイベントについて解説します。

サンプルデモ – 円をドラッグしてください。

使い方

D3のdragは、タッチイベントに対応しています。

“.class”の部分にドラッグイベントを設定したい要素のclass属性を指定してください。

内部的にはonメソッドにより”.drag”をイベントとして登録しているので、dragイベントを解除したい場合は

とすれば解除できます。

イベント変数

イベントが開始されると下記のイベント変数が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イベントもこちらにまとめていますので参照ください。