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 ドラッグ操作の種類。startdragend
subject ドラッグイベントに関連する要素のデータオブジェクトへの参照。
x 現在のx座標
y 現在のy座標
dx x座標の変化量(ドラッグの総移動量ではない)
dy y座標の変化量(ドラッグの総移動量ではない)
identifier 文字列"mouse"、または数値のタッチ識別子。
active 現在アクティブなドラッグジェスチャーの数。
sourceEvent mousemovetouchmoveなど、ドラッグイベントの基礎となる入力イベント。

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イベントもここにまとめているので参照する。