使い方2018-03-18D3のマウス/タッチイベントに対応するzoomの使い方を紹介します。サンプルデモグラフ上でドラッグ/スワイプ、マウスホイール/ピンチインしてください。下のresetボタンで初期位置に戻ります。散布図の作り方はこちらを参照ください。ハイライト部分のzoomの使い方を解説します。zoom設定時にはまず、d3.zoom()でzoomイベントのプロトタイプを呼び出し、callメソッドでzoomイベントを登録するsvg要素を設定します。今回はsvg要素を設定していますが、d3.select,d3.selectAllで選択した要素に登録することができます。zoomed);svg.call(zoom);d3.zoom()には次のメソッドが用意されています。拡大縮小率の最小最大値を設定します。k1]のような2変数の配列で設定します。移動可能範囲を設定します。y1]]のような二次元配列で設定します。x0,y0は左上からの座標、x1,x2は右下からの座標を設定します。イベントを登録します。typenamesには次の3種類を設定可能です。zoom終了時listenerにはイベント時に呼び出す関数を登録します。listenerをnullとすると登録していたイベントが解除されます。onメソッドでは、イベントリスナー(イベント時に呼び出されるか関数)を登録します。d3.event.transform);gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));}zoomのイベントリスナーが呼び出された際、d3.eventは現在のzoomイベントに設定され、次のフィールドが設定されます。behaviorが設定されます。"start"、"zoom"、"end"のどれかが設定されます。現在のズーム倍率、移動量が設定されます。mousemoveやtouchmoveなど、元となるの入力イベントが設定されます。イベントリスナーはd3.event.transformを使って設定します。d3.event.transformをattrメソッドを使ってSVG要素の"transform"属性に割り当てると現在の倍率に変換されます。スケールにはtransformに設定されている次のメソッドを使って変更することができます。入力したscaleのdomain範囲を現在のzoom値(x方向)に合わせて変更します。入力したscaleのdomain範囲を現在のzoom値(y方向)に合わせて変更します。最後に、リセットボタンを押したした際に元の位置と倍率に戻す関数を設定します。d3.zoomIdentity);のようにcallメソッドを使って呼び出し、現在のtranform値に設定すると初期状態に戻すことができます。まとめマウス操作だけでなく、タッチイベント、ピンチイン、ピンチアウトにも対応しています。使い方D3の範囲選択の使い方を紹介します。棒グラフにtooltipを付ける方法を紹介します。種類一覧D3の折れ線グラフの種類を紹介します。TOP%d人のブロガーが「いいね」をつけました。