D3.js v4/v5 範囲選択 (d3.brush) 使い方 – タッチパネル対応

2018-04-02

D3の範囲選択の使い方を紹介します。範囲選択の基本的な使い方はこちらで紹介しましたが、タッチパネルに対応する場合はこのサンプルのように変更すると使いやすくなります。グラフ上をタッチしてください。こちらのサンプルとは違い、タッチしたところに範囲選択が移動します。

サンプルデモ

サンプルプログラム

解説

基本的なプログラムは、こちらの範囲選択と同じです。ハイライト部分を解説します。

クリック、タッチ時のイベント設定

callメソッドでbrushを設定すると、以下のSVG要素が設定されます。

選択可能範囲を表す"overlay"をclass属性にもつrect要素にイベントハンドラ(brushcenterd)を設定します。その際、"overlay"のtypeをselectionに変更しておくと、moveメソッドで選択範囲を移動させられるようになります。

クリック、タッチ時のイベントハンドラ

イベントハンドラ(イベント発生時に呼び出される関数)を設定します。

d3.mouse()はマウスの位置を取得するメソッドで、引数内の要素に対するマウス座標を[x,y]の形で取得します。dx,dyはタッチ時の選択範囲の大きさです。this.parentNodeを選択し、brushを設定した"overlay"の親要素を参照しています。

まとめ

タッチで移動した選択範囲は四隅をドラッグすることで選択範囲を変更できます。
タッチ操作ではドラッグ操作のように範囲選択しづらく、このページで紹介した方法が有効ですが、画面がスクロールしない場合などはこちらの方法が有効で、使い分けが重要です。