본문 바로가기

Let's go grab a data

Development/D3js

D3.js 개요 및 핵심 정리

by pub-lican-ai 2017. 4. 24.

왜 D3인가?

Data-Driven Documents 삼디, 디삼, 디쓰리! D3.js

BSD License : 소스 공개 의무 없음 BSD License

일반적이지 않은 다양한 Chart, Data Visualization 라이브러리 D3 Gallery

Smooth한 Transition과 Interactive 구현 D3 Gallery - Interaction

Sites.

https://d3js.org/ D3 다운로드 d3.zip
https://github.com/d3

How to use.

index.html
`<script` `src="../javascripts/lib/jquery.min.js"></script>`
`<script` `src="../javascripts/lib/d3.js"></script>`
`또는`
`<script` `src="https://code.jquery.com/jquery-3.2.1.min.js"></script>`
`<script` `src="https://d3js.org/d3.v4.min.js"></script>`

D3 핵심

#Selections : HTML DOM element를 선택한다
index.html
`<body>`
`<div` `id="demo"></div>`
`<div></div>`
`</body>`

d3sample.js
`targetDiv = d3.select("#demo");`   `//DOM에서 'demo' id를 가진 element를 찾음`
`targetDivs = d3.selectAll("div");` `//DOM에서 div 태그를 가진 element 전체를 찾음`

#Dynamic Properties : 동적 속성값 할당
d3sample.js
`d3.selectAll("p").style("color",` `"white");`                                             `//p태그 전체의 style color값을 white로 변경`
`d3.selectAll("p").style("color",` `function(d, i) {` `return` `i % 2 ?` `"#fff"` `:` `"#eee"; });`  `//function의 d는 binding되는 데이터 집합의 각 요소, i는 인덱스로 짝수홀수에 따라 다른 color값으로 변경`
`d3.selectAll("p")`
    `.data([4, 8, 15, 16, 23, 42])`                                                      `// 메서드 체이닝 method chaining`
    `.style("font-size",` `function(d) {` `return` `d +` `"px"; });`                             `//.data의 데이터 집합의 각 요소가 d인자로 전달되어 선택된 각 엘리면트에 다른 font-size값을 할당`

#Enter and Exit : 데이터 바인딩 된 엘리먼트를 생성하거나 제거
d3sample.js
`var` `targetP = d3.select("body").selectAll("p");`                        `//body안에 p태그를 찾지만 아직 존재하지 않으면 빈 selection을 반환하며, 비어있는 selection은 앞으로 존재하게될 p라고 생각함.`

`targetP.data([4, 8, 15, 16, 23, 42])`                                   `//데이터 집합`
       `.enter().append("p")`                                            `//데이터 바인딩한 엘리먼트 p를 데이터집합 요소 수만큼 append함`
       `.text(function(d) {` `return` `"I’m number "` `+ d +` `"!"; });`

`targetP.exit()`                                                         `//기존 데이터와 비교로 삭제되는 것이 있을 경우 remove함`
       `.remove();`
data binding 개념이 다르다?
위 처럼 enter() 함수로 데이터 바인드 엘리먼트를 작성하면 데이터가 바뀔 때마다 DOM에 자동으로 적용 되는 것이 아니다. 다시 그려줘야 한다.
다시 그리면서 .data로 새로운(변화된) 데이터와 기존에 바인딩된 데이터와의 비교로 추가되거나 변경되는 것만 반영한다. 이때 transition을 추가할 수 있다.
exit()는 기존의 데이터중에 삭제되는 경우 그 값을 가지고 있을 것인지 remove할 것인지를 정의할 수 있다. 이 때 transition을 추가할 수 있다.
enter() combines your data with the empty set from selectAll() and creates a set of elements that can then be accessed one by one in D3

#Transition : gradually interpolate styles
d3sample.js
`circles.enter()`
       `.append("svg:circle")`     `//svg의 circle 엘리먼트를 추가함`
       `.attr("r", 16)`            `//반지름이 16px로 추가함`
       `.transition()`
       `.attr("r",4);`             `//반지름이 4px로 서서히 줄어듬`
여기저기 transition()을 넣어보자
transition()의 위치에 따라 데이터가 바인딩되고, 각 요소 만큼 Iteration되는 시점을 알 수 있다.

저작자표시 비영리 변경금지

'Development > D3js' 카테고리의 다른 글

Interactive General Update Pattern (0)	2017.09.04
D3.js에서 svg 사용하기 (0)	2017.04.24
Scatter (svg) 그래프 그리기, Transition (0)	2017.04.20
D3.js 바 그래프 그리기(svg), 데이터 수정 (0)	2017.04.12
D3.js 바 그래프 그리기(div), 데이터 수정 (0)	2017.04.12

티스토리툴바