프로그래밍 이모저모/프로그래밍

D3.js를 다뤄보자

까까배달부 2018. 12. 23. 19:51


HTML과 CSS, Javascript에 대해서 기본적으로 알고 있다고 가정하겠다.


일단 Node.js의 Express를 통해 localhost 웹 서버를 개설한다.


쉽게말해 Node.js를 통해 내 PC가 웹서버로써 동작할 수 있게 한다는 것.


아직까진 포트를 열어두지 않아 내 컴퓨터에서 내 컴퓨터로만 접근 가능하다.(이에 대해선 좀 더 공부할 예정)


D3.js는 Data-Driven Document, D가 3개 들어가서 D3이다.


대용량의 데이터를 시각화 하는데 유리한 Javascript 라이브러리이다.


이를 사용하고 싶다면 


<script src="https://d3js.org/d3.v5.min.js"></script>
cs


를 추가해주자. v5가 가장 최신이고, v3,v4 에 비해 몇 가지 달라진 문법규칙이 있다고 한다. 이는 D3 git에서 API 정보를 참조하자.


<!DOCTYPE html>
<html>
  <head>
        <script src="https://d3js.org/d3.v5.min.js"></script>
      <meta charset="utf-8">
  </head>
  <body>
        <script>
            var dataSet = [20,40,50];
            
            var canvas = d3.select("body")
                .append("svg")
                .attr("width",500)
                .attr("height",500);
            
            var bars = canvas.selectAll("rect")
                .data(dataSet)
                .enter()
                .append("rect")
                .attr("width",function(d) {return d;})
                .attr("height",40)
                .attr("y",function(d, i) {return i*50});
      </script>
  </body>
</html>
cs


이것은 간단한 가로 bar chart를 그리는 소스코드이다. 자작임!


body의 script를 외부 js파일로 분리시켜서 진행해도 되지만 쉬운 예제니까 그냥 하자.


어차피 중요한 부분은 <script>와 </script> 사이에 있으니 이를 라인 별로 설명한다.


var dataSet = [20,40,50];
cs


dataSet을 정의한 Array이다. 아마 실전적으로 사용하기 위해서는 DB와 연동하여 사용할 생각이다.


            var canvas = d3.select("body")
                .append("svg")
                .attr("width",500)
                .attr("height",500);
cs


이제부터 d3를 사용할 수 있다. d3.select는 특정 DOM 객체를 선택할 수 있다. 여기선 body를 선택.


이의 return 값을 통해서 다시 .append method를 사용할 수 있는데, 이를 method chaining이라고 한다.


즉, 선택된 body에서 svg 태그를 덧붙여라(append) 라는 의미이다.


attr는 attribute의 약자. 붙여질 svg의 속성을 지정한다. 보다시피 width와 height는 500으로. 이외에도 color 등을 지정 가능하다.


            var bars = canvas.selectAll("rect")
                .data(dataSet)
                .enter()
                .append("rect")
                .attr("width",function(d) {return d;})
                .attr("height",40)
                .attr("y",function(d, i) {return i*50});
cs


selectAll은 페이지 내의 모든 객체를 선택한다.(이와 select의 차이는 좀 더 공부해봐야겠다.)


여기서 bars는 canvas에서 rect를 모두 선택한 것으로 나오는데, d3.selectAll이 아닌 canvas.selectAll이므로 canvas라는 SVG 내의 rect만을 선택한다는 것이다.


근데, 아직까지 만들어진 rect는 하나도 없는데 어떻게 선택한다는 것인가?


이게 D3의 특징인데, 아직까지 아무런 객체가 없더라도 select하면 '아무것도 선택되지 않음' 이 return 된다. 만약 객체가 있다면 해당 객체를 return한다.


.data는 바탕이 될 data를 의미한다. dataSet을 줬으므로 dataSet array 내의 3개의 data를 이용한다는 뜻.


.enter는 data를 DOM과 binding 한다는 의미이다. 현재 rect 객체는 하나도 없고, 바탕이 되는 data는 3개이므로 3개의 rect를 만들어 줄 필요가 있다.


마찬가지로 append를 통해 rect 객체를 생성하며,


.attr에서 익명함수 function(d), 즉 Data를 인자로 건네 각 데이터의 길이, 위에서 dataSet 내의 20,40,50이 각각 rect의 width가 된다.


y의 경우 d와 i를 인자로 넘기는데, i는 index, 즉 해당 data의 Array에서의 위치를 의미한다. 이에 50을 곱하므로 각 데이터는 0,50,100의 y값을 갖게 된다.


이를 실행하면,


위와 같은 그림이 나온다. 근데 너무 짧아서 티가 잘 안 나는데, 이는 SVG는 500이고 data값은 20,40 등의 작은 수이기 때문이다.


이를 늘리기 위해선 scale 등이 필요하다.