Brush와 Bisect

brush 기능 

Brush : 차트 내 범위를 지정하는 기능. (github 曰 1, 2차원상의 데이터를 클릭이나 드래그를 이용하여 상호작용하는 기능.)

Bisect를 같이 이용한다면 범위지정된 데이터의 배열 인덱스나 해당 범위의 데이터를 알아낼 수 도 있다. 

이를 통해 드래그되는 범위 만큼을 CRUD 가능하며, 새로운 차트로도 그려낼 수 있다.

순수하게 Brush만 사용하면 그저 그림이나 그리는 기능일 뿐이기에, 실제로는 대부분은 Bisect를 같이 사용하지 않을까 싶다.

 

Bisect: 정렬된 배열 상의 데이터 검색 기능.

특정 위치의 데이터(x축 데이터)를 읽어와서 해당하는 y값을 읽어오는 기능이라고 생각하면 된다.

소스코드를 들여다본 것은 아니지만, 생각컨대, pixel 값과 배열 크기를 비례하는 크기로 나누어 index(내지는 index에 해당하는 데이터)를 가져오는 것 같다.

실제로 range() 와 domain() 함수를 통해 pixel 과 배열의 최소/최대값을 지정해주어야 제대로 동작하는 것을 보면 얼추 맞지 싶다. 실제 brush 되는 범위의 데이터는 아래와 같이 확인 가능하다.

어... 잘 안보이는데 brush 범위를 움직이는 것에 따라 데이터가 변화한다는 것을 확인할 수 있다.

아래 첨부할 소스코드의 app-brush 컴포넌트의 addBrush() 함수가 위 gif 의 데이터를 처리하는 부분이다.

대강 이러한 형태를 띈다.

Bisect 기능은 위에 언급하였다시피 pixel 값의 범위와 배열의 크기를 비례하여 가져오는 것으로 유추하였다.

mouse 이벤트가 발생하였을 때 pixel 과 배열을 비례한 값으로 나눴을 때 그 중간에 마우스가 위치하였을 경우, 기준을 어느 쪽으로 나눌 지가 애매해지는데, bisector 메소드를 이용하고 left/right 로 지정이 가능하다. 위 소스의 경우에는 right로 지정하였다. 

x0과 x1은 brush의 시작점과 끝점의 날짜, i0와 i1은 시작점과 끝점의 index 이다.

단순히 위와 같이 출력만 하는 것이 아니라, brush한 값을 이용하여 차트를 다시 그릴 수도, 매번 brush 를 조금씩 이동하며 video 같은 (매 이동마다 차트를 다시 그리는) 기능을 만드는 것도 좋다. 

쓸데없이 요청을 많이 날리는 것을 바라지 않는다면, debounce time을 줘서 이벤트를 제한하는 것도 좋다.

가령 아래와 같이 말이다.

mouse 이동 별로 event를 줘도 좋다.

---

단순히 위와 같이 x축만을 이용한 brush 말고도 x, y 축 모두 이용한 brush 들도 존재한다. d3 gallery(example) 페이지에 들어가면 해당 기능들에 대한 예제들이 많이 있으므로 참고하는 것을 추천한다. 

그리고 아래에 위의 gif의 소스코드를 첨부한다.

ng-blog.zip

0.14MB

* 2020/07/24 내용 추가. 
굳이 다운받아 볼 필요 없이 아래에서 보는게 편할 것이다. 위 소스는 못 만들기도 했고...

https://observablehq.com/@3sam3/bar-chart-with-scaleband-brush-testing

Bar chart with scaleBand & brush testing

D3를 공부하고 싶다면 Mike Bostock 아재 소스를 보면 된다. 

---

 

https://github.com/d3/d3-brush

d3/d3-brush

https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

Brush & Zoom

https://observablehq.com/@d3/brushable-scatterplot

Brushable Scatterplot

https://observablehq.com/@d3/gallery

Gallery