D3.js v4/v5 範囲選択 (d3.brush) 使い方

2018-03-25

D3の範囲選択の使い方を紹介します。サンプルデモでは表示されているグレーの四角をドラッグするか、グラフ上の何もないところをクリック&ドラッグして範囲選択できます。グレーの四角の隅をドラッグすると範囲の大きさを変更できます。

サンプルデモ

サンプルプログラム

解説

1. 選択時のスタイル設定

選択時にプロットに設定するスタイルを定義しておきます。

2. 散布図の表示

散布図の作り方の詳細は、こちらを参照ください。関連する部分を解説します。
散布図の元データを作成します。

d3.randomUniformは引数に設定した範囲で乱数を発生させる関数を、d3.randomNormalは平均値と標準偏差を引数にしてガウス分布に従う乱数を発生させる関数を設定するものです。これらとd3.range(500).map()を使って、500点の二次元配列データを作成します。

body要素内にSVG要素を設定し、その中に"g"要素を設定します。プロットの表示と範囲選択用のbrush用を"g"要素内に設定します。

3. brushの設定

範囲選択用のbrushを設定するプロトタイプを設定し、callメソッドで呼び出すことでbrushを設定します。

callメソッドでbrushを設定すると、以下のSVG要素が選択した要素内(今回は"g"要素)に設定されます。

また、d3.brushには次の設定が可能です。

d3.brush .move() brushの選択範囲を移動させます。[[x0, y0], [x1, y1]]の2次元配列で設定します。
d3.brush .extent() brushの移動可能範囲を設定します。[[x0, y0], [x1, y1]]の2次元配列で設定します。
d3.brush .handleSize() brushのハンドルサイズを設定します。デフォルトは6です。
d3.brush .on(typenames, function) イベント時に呼び出す関数を設定します。typenamesは次の三種類から設定します。
start - 選択開始時。
brush - 範囲選択の変更時。
end - 選択終了時。

今回はonメソッドを使って、start, brush時に呼び出すイベントリスナー(brushed)を設定します。

イベントリスナー(イベント時に呼び出される関数)は、イベントリスナーが呼び出された時に設定される、d3.eventのフィールドを使って設定します。

d3.event .target 関連するbrushビヘイビアへの参照
d3.event .type 現在のイベント。“start”、“brush”、“end”のどれか。
d3.event .selection 現在のbrushの選択範囲。[[x0, y0], [x1, y1]]の2次元配列。
d3.event .sourceEvent mousemove、touchmoveなどbrushイベントの元となるイベント種類

フィールドのselectionを使って選択された範囲内の散布図のプロットにスタイルを設定します。.invertは散布図上の座標を画面上の座標へ変換する関数xScale,yScaleを逆変換して、画面上の座標から散布図上の座標に変換する関数に変更するメソッドです。

classedメソッドを使って、第二引数の条件式が真のものに"selected"クラスを設定し、偽のものから除外します。

まとめ

タッチパネルだと範囲選択がしずらく、こちらの方法が有効です。。