D3.js + React.js (Hooks) 함께 사용하기 -2. 곡선 그래프 만들기

bangina·2020년 7월 24일
1
post-thumbnail

이번 게시글에서는 데이터 시각화 라이브러리인 D3.jsReact.js의 Hooks를 이용하여 곡선 그래프를 간단하게 만들어보겠습니다.

D3.js를 처음 접하신다면, 전편인 D3.js + React.js (Hooks) 함께 사용하기 -1 를 간단히 훑고 돌아와주세요 😀

필요한 메서드들 불러오기

곡선 그래프를 그리는데 필요한 메서드들을 불러와주세요.

  • react에서는 상태관리를 위한 useState, useRef, useEffect를,
  • d3에서는 select, line(path그리는 메서드), curveCardinal(곡선 그래프 스타일)

을 불러와주면 됩니다.

재료(데이터) 준비하기

곡선그래프에 바인딩될 데이터 배열을 useState로 만들어주세요. 아래에서 useEffect를 사용하여 데이터(lineData)에 변화가 감지될 때마다 재 렌더링되도록 활용할테니 참고해주시고요.

그리고 가상DOM이 아닌 실제 DOM에서 SVG요소를 직접 조작하기 위해 useRef를 사용하겠습니다.

d3의 line 메써드 세팅하기-좌표값 계산식과 그래프 스타일 정의

도큐먼트의 svg를 선택하는 메써드를 변수로 정의해놓고(아래에서 편하게 불러오기 위해),
myLine이라는 이름의 변수 안에다가 d3의 line메서드를 저장합니다.
line메써드에는 데이터값을 받아와서 x좌표, y좌표값, 그리고 그래프 스타일을 설정할 수 있는 메써드가 있습니다. x좌표는 50px간격으로 설정하고 y좌표(높이값)은 (캔버스의 대략적인 높이값 - 데이터값)으로 작성해줍니다.

(WHY❓ document에서 x,y 기준점은 현실세계의 그래프와 달리, 브라우저 좌측 상단 모서리지점입니다. y값은 좌측모서리로부터의 거리이므로, y값을 수치 그대로 넣게되면 우리 현실세계에서의 그래프와는 상하가 반대인 그래프 모양이 그려지게 되죠. 네 그래서 캔버스 높이에서 데이터값을 빼서 y값을 만듭니다❗️)

데이터와 line 바인딩하기

위에까지가 세팅 단계였고, 이제 그래프를 그려주기만 하면 됩니다.
위에서 생성해놓은 svgLine변수(svg태그)의

<path> 태그를 선택하고 ➡ lineData와 바인딩을 해준 뒤 ➡ path태그에서 좌표값을 담는 속성인 "d"에 콜백함수를 이용해 위에서 만들어놓은 line()메써드를 불러옵니다.

위에서 myLine 이라는 이름으로 line 메써드에 데이터 value를 가져와서 x, y좌표값을 어떻게 계산해낼지 & 그래프 스타일은 어떻게 할지 미리 정의해놓았으니 불러오기만 하면 뿅! 🥂

이제 끝! 데이터 증감시키는 버튼 추가하고, svg태그 넣어주기

react의 hooks 기능으로 데이터 상태관리가 가능하도록 해놓았으니, 데이터값을 바꿔주어서 그래프에도 변경된 값이 잘 반영이 되는지 확인해봐야겠죠?
각각 데이터 값이 10씩 증가/감소하는 버튼을 만들어주고 증감 함수를 정의해주어 연결해줍니다. 그리고 처음에 선언해주었던 svg의 useRef를 실제 svg태그에 명시해줍니다. 그러면 이제 진짜로 끝! 👏👏👏

👌 결과물 짜잔!

profile
UX, Graphic에 관심이 많은 주니어 프론트엔드 개발자. 취미는 요가와 영상편집입니다. 이모지 Lover 💘

0개의 댓글