D3 차트의 구조

LIne chart ( 출처 : https://observablehq.com/@d3/line-chart )

D3 차트는 어려울 것 같지만 굉장히 단순한 구조를 가지고 있다.

물론 이를 이용해 뭔가 만드려면 고되지만, 그 구조만 이해하는 건 매우 간단하다.

딱 봐도 직교(데카르트/카티시언)좌표를 이용하는게 눈에 보이는데 구성 요소도 마찬가지다! 

차트 = x축 + y축 + 내용물 

해당 차트를 구성하는 요소들.

그려진 차트의 데이터가 표기되는 방식. 보기가 좋지는 않다. 중요한 것은 SVG 태그 내에 데이터가 위치한다는 점.

세부적으로 각각의 요소들은 위에 붉은 색으로 표시된(선언 x) xAxis, yAxis, data, line 등을 통해 설정이 가능하다.

D3 차트를 이용하여 기본형의 차트를 그리는 작업은 기본적으로 위의 변수들을 지정하는 과정이라고 봐도 무방하...지 않을까? 내 개인적으로는 그렇게 생각한다.