D3.js로 그래프 그리기 1. 기본 개념 (1) 들어가기 앞서

1. 들어가기에 앞서

 

 1) D3.js는 자바스크립트로 작성된 라이브러리이기에 자바스크립트의 문법에 따라 작성됩니다.

 

 2) D3.js는 d3 객체를 사용하여 구현합니다. D3.js의 모든 기능은 d3객체에 들어 있습니다.

 

 3) D3.js는 데이터를 처리하여 그 데이터를 표출할 좌표와 크기,넓이 등을 지정하고 그에 따라 결과값을 반환하는 기능 뿐입니다.

HTML의 DOM, SVG, Canvas 요소를 이용하여 그 요소들의 속성이나 좌표를 지정하여 그래프로 표시하는 라이브러리입니다. 그렇기에 그리는 사람의 창의력을 발휘하기는 좋지만 단순한 그래프를 표시하고 싶다면 굳이 D3.js를 사용하기보다는 Google Chart Api 등을 이용하는 편이 빠르고 편리합니다.

 

 4) d3객체의 기능이 알고 싶다면 아래의 링크를 통해 API레퍼런스들을 확인해보시면 됩니다.

https://github.com/d3/d3/blob/main/API.md

GitHub - d3/d3: Bring data to life with SVG, Canvas and HTML.

 5) 메서드 체인

D3.js는 자바스크립트의 메서드 체인 기능을 적극적으로 활용합니다.

메서드 체인은 온점(.)으로 메서드를 구분하여 계속하여 구분합니다.

 

d3.select("#myCanvas")
  .selectAll("rect")
  .data(dataSet)
  .enter()
  .append("rect")
  .attr("x", 10)

※ 코드 복붙에서의 편리를 위해 D3.js로 작성 시 쌍반점';'을 잘 붙이지 않습니다.

 

 6) d3.js 라이브러리 불러오기

HTML 파일을 준비한 후 D3.js라이브러리를 불러오기 위해서는 아래의 코드를 삽입해줄 필요가 있습니다.

<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>

서버에서 직접 라이브러리를 불러오는 형식으로 스크립트 요소를 사용합니다.

 

7) d3.js의 기본적인 흐름 

 d3.js를 활용하기 전에 기본적인 흐름을 알고 있는 것은 중요합니다.

처음 혼자서 공부할 때 무엇을 하는지 모르고 따라 하다보니 막상 그래프를 만들고 나서도 어떻게 한 것인지 몰랐기 때문입니다. 

기본적인 흐름은

 

① 데이터 읽어들이기

② 표시할 그래프 지정

③ 그래프를 그리는데 필요한 SVG 도형 요소 준비

④ 지정 시 애니메이션 처리

⑤ 지정 시 이벤트 처리

 

으로 이어집니다.