はじめに
d3.jsのbrushを使う機会があったのでメモ。
brush
svg領域を領域選択することができる。種類は3種類。
尚,選択できる領域を
brush.extent([[a, b], [c, d]])
で指定できる。
- 縦横に選択領域を広げられるbrush
- x軸方向にのみ選択領域を広げられるbrushX
- 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 - 体裁を整える