http://www.dashingd3js.com/ 사이트의 D3.js 익히기 실습을 하면서 요약 정리해 본다.
1. 셋업
- https://github.com/mbostock/d3 가서 오른쪽 하단의 "Download Zip" 에서 파일 다운로드 한다
- 디렉토리 생성하고 d3.min.js 파일을 해당 디렉토리에 copy하고 간단한 HTML 파일 하나 만들면 준비 끝 (hello.html)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.min.js"></script>
</head>
<body>
<p>Hello!</p>
</body>
</html>
2. DOM 조작하기
- DOM 을 조작하여 Circle을 그린다 (참조)
- d3는 selector를 제공하여 tag, attribute, style 등을 제어할 수 있다 (jQuery처럼)
- Chrome Dev Tools의 console을 통해서 조작한다
- append : child tag 추가, attr : attribute 추가
d3.select("body").append("svg").attr('width', 50).attr('height', 50).append('circle').attr('cx', 25).attr('cy', 25).attr('r', 25).style('fill', 'orange');
- 결과 : 오랜지색 원을 동적으로 생성함
3. Data와 DOM 바인딩하기
- data 메소드를 이용한 DOM과 Data의 바인딩 (참조)
- 코드 : data(<data>).enter() 한쌍의 구문을 사용
var theData = [1,2,3];
var p = d3.select('body').selectAll('p').data(theData).enter().append('p').text('dowon');
- selectAll에서 Data와 바인딩 될때 empty selection 일 경우 enter()를 통해서 바인딩이 가능토록 한다
- data 메소드는 theData에서 1 번째는 첫번째 p tag를 2 번째는 두번째 p tag와 맵핑된다
- virtual selection에는 enter, update, exit 가 있다
+ enter : missing element 와 data binding
+ update : 기존 element 와 data binding
+ exit : 맨끝에것 제거
- 즉, enter를 하게 되면 virtual selection의 객체 레퍼런스가 return되어 append, attr, style등의 조작이 가능해 진다
- 그렇다면 데이터 1, 2, 3 의 숫자 값은 어디로 갔을까?
+ __data__ 프러퍼티가 p tag 밑으로 추가되었고 해당 속성에 값이 할당되어 있다
+ 이것을 Binding Data to DOM Element 라고 부른다
4. 데이터를 엑세스하여 사용하기
- callback function을 등록한다 (참조)
var theData = [11,222,567];
var p = d3.select('body').selectAll('p').data(theData).enter().append('p').text(function(d) { return d;});
- 의미 : variableName의 값으로 tag의 __data__ 속성값을 갖는다. functionName은 생략하여 anonymous function으로 등록 가능하다
1function functionName (variableName) { 2 return variableName; 3}
- 결과
다음 실습은 실제 데이터를 가지고 다양한 모양을 그려본다
<참조>
'Data Visualization > D3.js' 카테고리의 다른 글
| [D3.js] Bar Chart 만들기 (0) | 2015.08.20 |
|---|---|
| [D3.js] 배우는 방법 (1) | 2013.08.06 |
| [D3.js] DashingD3js.com 실습 - 4 (0) | 2013.08.06 |
| [D3.js] DashingD3js.com 실습 - 2 (0) | 2013.08.05 |
| [Charts] Javascript Chart & Visualization Frameworks, UI Builder (0) | 2013.08.02 |