계기판 차트 만들어보기

d3 라이브러리를 활용해서 계기판 차트를 한번 만들어보았습니다. 

 

계기판 차트 시연 영상

화면 기록 2023-12-17 오후 1.54.37.mov

5.63MB

 

개발 코드

https://github.com/wisdomstar94/d3-custom-librarys/blob/main/src/app/instrument-panel/page.tsx

계기판 차트 구현 코드는 위 URL 에서 확인해보실 수 있습니다.

 

완성 이미지

• value : 현재 값
• minimum : 최소 값
• maximum : 최대 값
• unitCount : 계기판을 이루는 요소들의 총 갯수
• unitAngle : 계기판을 이루는 요소들이 차지하는 원주율 값
• strokeWidthAngle : 계기판을 이루는 요소들의 총 길이가 차지하는 원주율 값
• strokeWeight : 계기판을 이루는 요소들의 두께 값
• cornerRadius : 계기판을 이루는 요소들의 라운딩 값
• startFillColor : 계기판이 채워질 때 최소값에 해당하는 색상
• endFillColor : 계기판이 채워질 때 최대값에 해당하는 색상
• displayLineUnitCount : 눈금자에 표시되는 수치 텍스트의 총 갯수

 

깊이 고민해야 했던 부분

arc 모양을 그릴 때는 d3 에서 제공해주는 arc 함수를 사용하면 쉽게 그릴 수 있었지만, 눈금자 부분에 수치 텍스트를 위치시키는 부분이 문제였습니다.

 

그래서 눈금자 위치에 수치 텍스트를 어떻게 맞춰서 위치시킬 수 있을까를 고민해보던 찰나, 아래와 같은 이미지가 머릿 속에 떠올랐습니다.

 

그렇습니다. 바로 학생 때 배웠던 삼각함수를 응용하면 원하는 눈금자 위치에 맞는 x, y 좌표를 구할 수 있을 것 같았습니다. 그래서 javascript 에서 제공해주는 Math.sin 함수와 Math.cos 함수를 이용하여 각 눈금자 위치에 맞는 x, y 좌표를 구해 해당 위치에 눈금자 수치 텍스트를 위치시킬 수 있었습니다.

 

참고 사이트

https://www.pinterest.co.kr/pin/311241024259236439/

App interface design, Graph design, Gauges

계기판 UI 는 위 자료를 참고하였습니다.