D3.js 를 사용하여 데이터 시각화하기 #6 Click, Drag 이벤트 사용하기

Explanation

한동안 일이 많아서 정신이 없었는데, 이제 좀 여유가 생겨서 다시 포스팅을 하려고 했으나,
어김없이 찾아 온 귀차니즘으로 한참을 고민하다…
의식을 부여잡고.
오늘은 D3를 사용한 차트에 Click과 Drag이벤트를 추가하는 것에 대해 적어보려 합니다.

1. 막대 차트에 클릭 이벤트 추가하기

막대 차트는 예전에 만들었던 것에서 스타일을 좀 수정하고 툴팁 부분만 빼봤어요.
https://falsy.me/d3-js-를-사용하여-데이터-시각화하기-4-custom-bar-charts/

이제 여기에 클릭 이벤트를 추가하면 아래와 같아요.
저는 막대를 클릭하면 클릭한 막대에만 색이 변하게 해봤답니다.

간단하게 달라진 부분만 살펴보면,

음.. 이벤트를 추가하는건 간단해요. .on()으로 콜백 함수를 등록할 수 있답니다.
그리고 콜백 함수에는 첫번째 인자로 .data()로 추가한 data값이, 그리고 두번째 인자로는 선택된 rect의 index값이 전달 된답니다.

그래서 해당 콜백 함수에서는 svg에 등록되었는 rect를 each로 순회해서 rect가 인자로 받은 index(선택 한 rect의 index)가 순회한 rect의 index가 같을때 해당 rect에 포인트 컬러를 채우고 나머지 rect에는 기본 컬러로 채워주도록 했답니다.

2. 선 차트에 Click, Drag 이벤트 추가하기

역시 예전에 만들었던 간단한 라인 차트로 시작하려 했다가 저번 글에 사용한 라인 차트로 시작합니다.
참고로 저번에 적은 글은,
https://falsy.me/d3-js-를-사용하여-데이터-시각화하기-5-area-charts-그라데이션
더 옛날에 라인 차트에 대한 글은,
https://falsy.me/d3-js-를-사용하여-데이터-시각화하기-1-line-charts/

저는 여기에 툴팁을 넣고 드래그 이벤트를 넣어서 드래그에 따라서 움직이는 툴팁을 만들어 볼거에요.

조금 복잡할 수 있어요.
우선 결과물을 먼저 보여드리면 아래와 같습니다.

악… ‘scaleTime’으로는 처음 해보는데, x축 첫번째가 왜 안나올까요…

시간이 너무 늦어서, 나머지는 내일 다시 추가하는 것으로…

어제에 이어서..

x축에 첫번째가 안나와서 한참 해맸는데, .nice()를 붙여주면 되네요!
참고. https://www.d3indepth.com/scales/

2-1. Click 이벤트 추가하기

간단하게 설명을 좀 적어보면,
우선 라인 차트에 경우에는 클릭 이벤트로 툴팁을 표시하기에는 선택 영역이 너무 좁아서 조금 UX적으로 좋지 않기 때문에, 저는 투명한 막대 차트를 뒤에 깔고 거기에 클릭 이벤트를 추가하고 클릭한 데이터의 index 값으로 라인 차트의 해당 index의 y값에 툴팁을 이동시켜 주었습니다.

약간의 이해를 돕기 위해 뒤에 있는 투명 막대 차트를 살짝 표시해보면 아래와 같습니다.

해당하는 부분의 코드를 살펴보면,

2-2. Drag 이벤트 추가하기

Drag 이벤트는 차트 영역 전체를 기준으로 동작해야 하니까 이벤트를 svg에 걸어줍니다.
그리고 d3에서 제공하는 drag() 라는 메서드를 사용했습니다.

d3.drag() 참고링크.
https://github.com/d3/d3-drag#api-reference

그리고 위와 같이 이벤트 콜백 함수를 정의해 주었습니다.
한가지 특이한? 보통 DOM에 연결된 콜백 함수는 event라는 이벤트 객체를 사용할 수 있는데요, D3에서 등록한 이벤트는 ‘d3.event’라는 이벤트 객체를 사용할 수 있답니다.

다 적었는데, 뒤가 너무 허전한 거 같아서…
결과물을 다시 한번 보면 아래와 같답니다.

Leave a Reply