d3.js 를 이용하여 차트 그리기(easy)

D3.js? 

---

 

D3.js의 D3은 Data-Driven Documents 의 약자로 많은 양의 데이터와 이미지들을 비쥬얼적으로 표현해주는 자바스크립트 라이브러리 입니다. 

D3.js는 Slant(https://www.slant.co/)라는 최고의 제품을 추천해주는 외국 커뮤니티 사이트내에서 '베스트 자바스크립트 드로잉 라이브로리 1위', '최고의 비쥬얼 데이터(차트/그리드) 드로잉 라이브러리 1위' 등 드로잉 자바스크립트 관련하여 높은 랭킹을 차지하고 있습니다.

그만큼 D3.js 는 좋은 오픈소스 드로잉 라이브러리고 할 수 있죠.

그럼 어떠한 자바스크립트 라이브러리인지 같이 간단하게 알아보도록 하겠습니다.

 

D3.js - 간단한 차트 그리기

---

세팅하기

공식사이트( https://d3js.org/ ) 또는 github에서 d3.js를 다운로드하시거나, 아래와 같이 스크립트 링크 주소를
스트립트 src에 넣어주시면 준비완료!

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

 

그럼 함께 간단한 막대차트를 그려볼텐데요. 일단 차트에 넣어줄 데이터를 선언합니다.

var data = [5, 10, 15, 20, 25, 20, 15, 10, 5];

그럼 이제 d3를 이용해볼까요? 

d3.select('body').selectAll('div') .data(dataset) .enter() .append('div') .attr('class','chart') .style('height', function (d) { return d * 5 + 'px'; })

(d3.js 는 일반적으로 메서드 체이닝을 사용하고 있습니다.)

앞서 선언했던 데이터를 가지고 차트를 만들기 위해 먼저,  select('body')로 html안에 body 태그를 선택합니다. 그 후  selectAll('div')  함수를 호출하면 body태그 내 모든 div를 선택하겠다는 의미입니다.

모든 div를 선택되었다면 그곳에 아까 선언한 데이터를  data(data) 함수를 이용하여 바인딩 해주고  enter( ) 함수를 호출하면 배열을 돌면서 div를 배열의 개수만큼 만들어줍니다. 

자, 만들어진 div들을 추가하기 위해  append('div')  함수를 호출하면 스크립트 상 div태그가 만들어집니다.

이제 바인딩된 데이터들을 막대그래프스럽게 만들어 주기 위해 저는 미리 스타일 속성을 정의해 놓았습니다. 

.chart { display : inline-block; width: 25px; height: 75px; margin-right : 2px; background-color : coral; }

 

속성 추가를 위해 attr("class", "chart") 를 호출하면 미리 정의해둔 .chart 라는 이름의 클래스의 스타일을 가져옵니다.

d3를 이용 하여 스타일을 추가하고 싶을 때는 style() 함수를 이용하면 됩니다. 

style태그는 style( '스타일 속성', '콜백 함수' ) 로 구성되어있습니다.

자 이제 결과물을 볼까요?

 

짜잔!!!!!!!!!!!!

 

 

간단히 D3.js를 이용하여 막대차트를 그려보았는데요, 다음번에는 SVG를 사용하여 좀 더 복잡한 그래프룰 그려보도록 하겠습니다.

 

 

공식 튜토리얼 및 오픈소스

---

d3.js 는 공식github에서 튜토리얼과 다양한 종류의 차트들을 만나보실수 있습니다.

 

▶Gallery 바로가기 - https://github.com/d3/d3/wiki/Gallery