CSS
기본적인 스타일을 정의 해준다.
HTML
데이터 집합은 var dataset = [5,10,15,20,25,18,50,40,21,33,40,22,10,48,20]; 이다.
d3.select('body').selectAll('div').data(dataset)
그 다음 d3 객체를 이용해서 <body> 태그 아래에 있는 <div>를 모두 선택하고 "dataset"인 데이터 집합을 바인딩 한다.
여기에서 핵심은 dataset 값의 갯수만큼 자동으로 반복하여 막대를 그린다는 것이다.
그 다음은 enter() 함수이다.
새로운 문서요소를 생성하려면 사용해야 하는 함수이다.
선택된 DOM 요소 즉. <body> 아래 <div> 가 있는 지 살펴보고 데이터 집합의 데이터를 차례대로 DOM에 바인딩 하고 선택된 DOM 문서 요소보다 데이터 집합의 값이 많으면 다음 메소드로 데이터 값을 넘겨주는 역할을 한다.
즉. 선택된 DOM 은 데이터 집합의 값만 바인딩하고 append, attr 등의 함수는 수행되지 않는다.
append('div') 해당 함수는 바로 이해가 갈 것이다.
<div> DOM 을 새로 생성한다는 것이다.
attr('class', 'bar') 이것 또한 보이는 대로다.
생성된 <div>의 class 속성에 bar 값을 추가한다.
마지막으로 style 부분이다.
단순 말로 표현하자면 생성된 <div> 의 height 값을 function 에서 리턴되어 지는 값으로 정의 하라는 뜻이다.
function (d) 여기에서 d는 데이터 집합(dataset) 의 값을 의미한다.
결론적으로 dataset 값에 5를 곱한 값을 <div> 의 height 값으로 정의 한다는 것이다.
결과물을 보면 아래와 같다.
'『IT/개발』 > HTML' 카테고리의 다른 글
| jQuery 플러그인 jQuery.mtz.monthpicker 예제 (0) | 2014.09.29 |
|---|---|
| [D3.js] SVG 에 MouseOver 툴팁 (Tooltip) 추가하기! (0) | 2014.04.14 |
| [D3.js] JSON 데이터 불러오기 (0) | 2014.04.11 |
| [D3.js] CSV 데이터 불러오기 (0) | 2014.04.11 |
| [D3.js] 시작하기 (0) | 2014.04.10 |
