d3.jsのbrushを使ってみた v5

はじめに

d3.jsのbrushを使う機会があったのでメモ。

brush

svg領域を領域選択することができる。種類は3種類。
尚，選択できる領域を
brush.extent([[a, b], [c, d]])
で指定できる。

1. 縦横に選択領域を広げられるbrush
2. x軸方向にのみ選択領域を広げられるbrushX
3. y軸方向にのみ選択領域を広げられるbrushY

ex) 1. brush

See the Pen GdzqRr by Heyhoh (@Keyhoh) on CodePen.

ex) 2. brushX

See the Pen erxzmx by Heyhoh (@Keyhoh) on CodePen.

ex) 3. brushY

See the Pen wjNWaP by Heyhoh (@Keyhoh) on CodePen.

brushのイベント

brush は "start", "brush", "end" の三つのタイミングでイベントを拾うことができる。
brush.on("end",function(){})
でイベントを定義できる。
ex) brush.on

See the Pen wjNaWW by Heyhoh (@Keyhoh) on CodePen.

API

より詳細な操作は公式APIを参照のこと。

おわりに

初投稿です。
間違いや質問等頂ければとても嬉しいです。

改稿履歴

2019/07/08 - 体裁を整える