왜 D3일까?
D가 3개 여서 그렇다 (.....) Kubernetes를 K8S 따위로 부르는 것 보다는 그럴 듯 하지만 그래도 뭔가 맥빠지고 단순한 ㅋㅋ
그렇다는 말은 직관적으로 뭘 하는지 쉽게 알 수 있다는게 아닐까
그래서 D3개가 뭐냐면, Data Driven Document 이다. Data가 주도하여 만드는 문서라는 뜻이다.
Data Binding
d3의 Data Binding은 세가지 메소드를 통해 이루어진다.
.data() .enter() .exit()
이 세가지 메소드를 이해하는것이 D3 Data Binding의 핵심이라 할 수 있다.
.data()
.data() 메소드의 역할은 Data를 Iterate하면서 다음에 나올 메소드들을 실행하겠다는 일종의 선언의 역할을 한다.
아래에 나올 메소드 들에서 d 와 i 두가지 변수를 받아서 사용할 수 있는데 d는 Iterable 객체의 Element이고, i는 해당 Element의 Key(Index)이다.
.enter()
d3이 Data-Driven이라는 것은 이 enter 메소드를 통해 돋보인다. .enter() 메소드의 기능은 말보다는 코드를 통해 파악해보자.
d3.select("svg")
.selectAll("circle");
.data(data)
.attr('r', d => d.r)
.enter()
.append("circle");
JavaScript
위의 코드를 풀어서 적으면 다음과 같다.
1. svg 태그 안에 있는 모든 circle들을 골라
2. circle들이랑 data의 element들을 하나씩 대응하면서,
3. attribute 들을 설정해줄거야!
4. 만약 circle이 data에 비해 부족하다면 //.enter()
5. circle을 추가해줘!!! //.append('circle')
JavaScript
정리하자면 여러 if 들로 스파게티가 될 코드를 메소드 하나로 정리해주는 역할을 하는것이다.
.exit()
.enter() 가 '부족하다면'의 역할을 했다면, .exit() 는 '넘쳐난다면' 의 역할을 한다.
d3.select("svg")
.selectAll("circle");
.data(data)
.attr('r', d => d.r)
.enter()
.append("circle");
.exit()
.remove();
JavaScript
1. svg 태그 안에 있는 모든 circle들을 골라
2. circle들이랑 data의 element들을 하나씩 대응하면서,
3. attribute 들을 설정해줄거야!
4. 만약 circle이 data에 비해 부족하다면 //.enter()
5. circle을 추가해줘!!! //.append('circle')
6. 만약 circle이 data에 비해 많다면 //.exit()
7. 걔네들을 지워줘!! //.remove()
JavaScript
아 쉽다~