영어공부 겸 이해의 목적으로 번역하여 정보 전달이 제대로 안 될 가능성이 높으니 참고하지 않는 편이 좋으실 수 있습니다.
D3.js 데이터를 기반으로 document를 조작하기 위한 자바스크립트 라이브러리이다.
D3는 HTML, SVG, CSS를 사용하여 데이터를 다룬다. 웹 표준을 중요시 하는 D3는 모든 최신브라우저에서 가능하며, 특정 프레임워크와 상관없이 강력한 시각화 컴포넌트를 제공하여 DOM을 조작한다.
소개
D3는 임의의 데이터를 DOM에 bind하게 해주며, 변형시킨다. 예를들어, D3로 숫자 배열을 HTML 테이블로 만들 수도 있고, 같은 데이터로 부드럽게 변형 가능하고 상호작용이 되는 interactive한 SVG 바 차트도 만들 수 있다.
D3는 가질만한 모든 기능을 제공하는 획일적인 프레임웍이 아니다. 대신에 D3는 데이터를 기반으로 하는 문서의 효율적인 조작으로 핵심적인 문제를 해결해준다. 그래서 독단적인 표현을 피하고 엄청난 유연성을 부여하며 HTML, SVG, CSS와 같은 웹 표준의 다양한 가능성을 가능하게 해준다. 최소한의 부하로도 D3는 상당히 빠르면서도, 큰 dataset을 지원하고, interaction과 애니메이션을 위한 다이나믹한 행동을 지원한다. D3의 기능적 스타일은 컴포넌트와 플러그인의 다양한 조합을 통해 코드 재사용성을 가능하게 해준다.
Selections
W3C DOM API를 사용하여 문서를 수정하는 것은 지루하다. 메서드 이름은 장황하며 DOM접근시 반복과 임시 저장은 필수이다. 예를들어 paragraphs 요소의 text 색상을 바꾸기 위해 아래와 같다.
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.style.setProperty("color", "white", null);
}D3는 selections라고 불리는 임의의 노드들의 세트를 갖고 서술적인 접근을 사용한다. 예를들어 위의 loop를 아래와 같이 할 수 있다.
d3.selectAll("p").style("color", "white");개개의 노드를 조작할 수도 있다.
d3.select("body").style("background-color", "black");Selector는 W3C Selectors API에 정의되어 있고, 최신 브라우저에서 지원한다. 오래된 브라우저는 Sizzle로 가능하다. 위의 예제는 태그이름(p, body)로 노드를 선택했다. 요소는 속성값, 클래스, ID등 다양하게 사용하여 선택할 수 있다.
D3는 노드를 조작하기 위한 다양한 메서드를 제공한다.(속성과 스타일을 세팅하거나, 이벤트 리스너를 등록하거나, 노드를 추가/삭제/정렬 하거나, HTML이나 텍스트 내용을 바꾸거나) 이것들은 다양한 요구에 충족한다. 각각의 D3 selection는 노드들의 배열이라서 밑쪽 DOM에 다이렉트로 접근하는 것도 가능하다.
Dynamic properties
제이쿼리나 prototype과 같은 DOM 프레임웍에 친숙한 사람들은 D3도 이와 비슷하다는 것을 금방 알것이다. 그러나 스타일, 속성, property는 데이터의 함수로 특화되어 있다. 보이기에는 간단해 보일지라도 이러한 함수들은 놀라울 정도로 강력하다. 예를들어 d3.geo.path함수는, 지형좌표를 SVG path data로 바꾸는 프로젝트가 있다. D3는 area, 선, 파이 차트를 위한 graphical primitieves같은 재사용 가능한 함수와 함수 factory를 제공한다.
예를들어, 랜덤으로 색깔 변환
d3.selectAll("p").style("color", function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});홀짝 노드를 위한 그림자색 바꾸기
d3.selectAll("p").style("color", function(d, i) {
return i % 2 ? "#fff" : "#eee";
});계산된 프로퍼티는 종종 데이터를 참조한다. 데이터는 배열로 되어있으며 각 값은 selection함수의 d라는 첫번째 argument에 전달된다. 디톨트인 join-by-index로 데이터 배열의 첫번 째 요소는 선택된 첫번째 노드를 전달한다. 두번쨰 요소는 두번쨰 노드가 된다. 예를들어 숫자 배열을 paragraph요소로 묶으면 이 숫자들을 다양한 font 크기로 계산할 수 있다.
d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });일단 데이터가 document에 bind되면, data operator를 생랼할 수 있다. D3는 이전에 바인드된 데이터를 찾을 것이다. 이것은 rebind없이 프로퍼티를 재계산 할 수 있게 해준다.
Enter and Exit
D3의 enter와 exit 셀렉션을 사용해서, incoming 데이터를 위해 새로운 노드를 추가하거나 더이상 필요없는 노드를 삭제할 수 있다.
데이터가 셀렉션에 바인드 될 때, 데이터 배열의 각 요소는 셀렉션의 노드와 짝을 이룬다. 만약 데이터보다 노드가 적으면 남는 데이터 요소는 enter에 append해서 만들 수 있는 enter 셀렉션으로 형성된다.
d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });업데이트된 노드는 data연산자의 결과인 기본 샐렉션이다. 그러므로 만약 당신이 enter와 exit셀렉션을 잊어버렸다면, 자동으로 일치하는 데이터가 존재하는 기본 셀렉션이 선택된다.... ㅜㅜ 일반적인 페턴은 초기 셀렉션을 세부분으로 나누는 것이다. 수정하기 위한 업데이트된 노트, 추가할 entering노드, 제거될 exiting노드
// Update…
var p = d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(String);
// Enter…
p.enter().append("p")
.text(String);
// Exit…
p.exit().remove();이 세가지 케이스를 각각 다루면서, 어느 연산이 어느 노드에 연관되는지 알 수 있다. 이 것은 성능을 향상시키고, 단지 변형뿐만 아닌 더 나은 control을 제공한다. 예를들어, 바차트에서, 생략..
D3는 데이터에 근거해 문서를 변형시켜준다. 이것은 요소를 만들거나 없애는 것을 포함한다. D3는 사용자 interaction의 반응으로 기존의 문서를 바꿀 수 있게 해준다.
그만 할래 ㅜ