D3.js v4/v5 zoom 使い方

D3のマウス/タッチイベントに対応するzoomの使い方を紹介します。

サンプルデモ

グラフ上でドラッグ/スワイプ、マウスホイール/ピンチインしてください。下のresetボタンで初期位置に戻ります。

サンプルプログラム

解説

散布図の作り方はこちらを参照ください。ハイライト部分のzoomの使い方を解説します。
zoom設定時にはまず、d3.zoom()でzoomイベントのプロトタイプを呼び出し、callメソッドでzoomイベントを登録するsvg要素を設定します。今回はsvg要素を設定していますが、d3.select,d3.selectAllで選択した要素に登録することができます。

d3.zoom()には次のメソッドが用意されています。

zoom .scaleExtent() 拡大縮小率の最小最大値を設定します。[k0, k1]のような2変数の配列で設定します。デフォルトは [0, ∞]です。
zoom .translateExtent() 移動可能範囲を設定します。[[x0, y0], [x1, y1]]のような二次元配列で設定します。x0,y0は左上からの座標、x1,x2は右下からの座標を設定します。デフォルトは [[-∞, -∞], [+∞, +∞]]です。
zoom .on(typenames, listener) イベントを登録します。typenamesには次の3種類を設定可能です。
start - zoom開始時
zoom - zoom時
end - zoom終了時
listenerにはイベント時に呼び出す関数を登録します。listenerをnullとすると登録していたイベントが解除されます。

onメソッドでは、イベントリスナー(イベント時に呼び出されるか関数)を登録します。

zoomのイベントリスナーが呼び出された際、d3.eventは現在のzoomイベントに設定され、次のフィールドが設定されます。

d3.event.target 関連するD3のzoom behaviorが設定されます。
d3.event.type "start"、"zoom"、"end"のどれかが設定されます。
d3.event.transform 現在のズーム倍率、移動量が設定されます。
d3.event.sourceEvent mousemoveやtouchmoveなど、元となるの入力イベントが設定されます。

イベントリスナーはd3.event.transformを使って設定します。d3.event.transformをattrメソッドを使ってSVG要素の"transform"属性に割り当てると現在の倍率に変換されます。スケールにはtransformに設定されている次のメソッドを使って変更することができます。

transform .rescaleX(scale) 入力したscaleのdomain範囲を現在のzoom値(x方向)に合わせて変更します。
transform .rescaleY(scale) 入力したscaleのdomain範囲を現在のzoom値(y方向)に合わせて変更します。

最後に、リセットボタンを押したした際に元の位置と倍率に戻す関数を設定します。d3.zoomIdentityには、倍率0,移動量0のtransform属性が登録されており、

のようにcallメソッドを使って呼び出し、現在のtranform値に設定すると初期状態に戻すことができます。

まとめ

マウス操作だけでなく、タッチイベント、ピンチイン、ピンチアウトにも対応しています。