【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush)

最終更新日

d3.svg.brush

下位のグラフで選択された範囲を上位のグラフで拡大表示します。
複雑なことをやっているように見えますが、D3.jsでは比較的簡単に実装することができます。

example

サンプルコード

データ範囲の選択機能を追加するためにd3.svg.brush()を使用しています。
ヘルパー関数として、こちらの記事で作成した関数を使用しています。

example

ちょっとだけ解説

brushオブジェクトは、グラフ上にマウスドラッグで範囲選択を行う機能を提供します。
選択対象はxメソッド、yメソッドにscaleオブジェクトを渡すことで設定します。
(xメソッドだけだと横軸のみ、x,y両メソッドにスケールが設定されている場合は縦横の選択が可能になります)
brushイベントは選択時に呼ばれます。

brushイベントによって呼ばれたコールバックの中では、brush.extent()メソッドによって選択されたデータ値を取得し、その値でxScaleのドメインを更新します。
xScaleが適用されている上位グラフと上位x軸(xaxis)のアップデートを行うことで、下位グラフで選択された範囲のデータを上位グラフ上で表示されます。