d3 중요문법 정리

d3js 란?

• 정해진 그래프 유형이 없음
• 데이터를 DOCUMENT 표현하기 위한 기능을 제공(좌표, 연산, 색, 레이아웃등)
• 제공 기능과 데이터를 사용하여 기본 그래프 표현
• 개발자 프로그램으로 그래프 수정 및 추가
• Data Driven Document

Selections

• d3 현재문서에서 가져온 문서요소 집합을 selection이라고 한다. 
• 문서요소를 selection 한 후에 연산자(operator)를 적용할 수 있다. attr, styles,properties, html, text 지정할 수 있다.
• seletion 한 뒤에 data와 연결할 뒤에 데이터 중심으로 조작할 수 있다.
• d3는 메서드 체이닝을 지원한다. 이를 이용하여 연산자 적용할 때 표현을 간결하게 할 수 있다.

d3.select()

• document.querySelector() 와 같은 기능
• method chain을 할수 있도록 d3 인스턴스를 반환한다.
• 단일 문서요소를 선택해서 반환한다. 셀렉터와 일치하는 문서가 여러개 일경우 첫번째로 일치하는 문서요소를 선택한다.
• 파라메터에 엘리먼트를 직접 지정할 수 있다.

d3.selectAll

• document.querySelectorAll()와 같은 기능 
• method chain을 할수 있도록 d3 인스턴스를 반환한다.
• 인자로 지정한 선택자와 일치하는 모든 문서요소를 선택한다. 문서요소는 문서상의 순서대로(위에서 아래로)선택된다.  

selection.selectAll(selector)

• selector 문자열에 부합하는 자손 문서요소를 모두선택하고 이를 그룹화하여 반환한다.
  
• selectAll 사용하여 그룹핑은 추가로 입력될 수 있는 플레이스 홀더에 영향을 준다.  
• 아래처럼 사용하는경우가 많다. 

d3.select("body").selectAll("div")

selection.data([values[, key]])

• 현재 선택물에 데이터 배열을 연결한다. 데이터가 문서요소에 할당되면 _data_ 프로퍼티에 저장된다.
• 첫번째 파라메터로 selection 반복에 사용할 배열데이터를 지정한다.
• 두 번째 파라메터는 함수를 작성할경우 함수의 파라메터로 데이터를 설정할 수 있다.
• 함수의 인자로는 datum(데이터) d와 인덱스 i를 전달받는다. key 함수가 데이터의 원별로 실행될때, 함수 내에서 this는 데이터 배열이고, key 함수가 존재하는 선택물에 실행될 때는 this는 DOM 관련문서이다. 

selection.enter()

• selection 안에서 데이터에 부합하는 만큼 DOM요소가 없을때, 각 데이터 원소를 위한 플레이스 홀더 역할을 하는 부족한 선택물에대한 참조를 반한다.
  
• data연산자의 반환값에 정의되어 있다. (data().enter()형식으로 사용)
• enter() 선택자에 대한 참조로 append, insert, select를 사용하여 부족한 부분에 DOM 요소를 추가 할 수 있다. 

Data jon Update & Enter & Exit

data() 연산자를 선택 항목에 적용하여 데이터 항목과 DOM 요소를 서로 조인한다. 결과 선택항목을 update 선택항목이라고 한다. 

데이터가 사용 가능한 DOM 요소보다 많은 경우 잉여 데이터 항목은 입력 선택이라는 선택항목의 하위 집합에 저장된다. 

enter()는 바인드된 데이터들 중에서 아직 실제 문서요소로 가지 못한 것들을 찾아서 가상의 객체로 생성하고 반환한다. 

exit() data에 있는 요소보다 이미 존재하는 DOM요소가 적을 때,  선택받지 못한 요소들을 선택한다. 선택받지 못한 요소들을 remove메서드를 통해서 제거한다. 

d3 version 3에서의 update, enter, exit 예제실습

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 

<p>Chair 1</p>
<p>Chair 2</p>
<p>Chair 3</p>
<p>Chair 4</p>

p{

  background : black;
  color:white;
  font-size:30px;
  width:100px;
  margin:20px;
  padding : 10px;
}

.person
{
   background : indigo;
  color:deeppink;
  font-size:30px;
  width:130px;
  margin:20px;
  padding : 10px;
}

1) No: of Data Points = No: of Elements (Enter Selection)

var myData = ["Persion 1", "Persion 2","Persion 3","Persion 4"];
 
d3.selectAll("p").data(myData).text(function(d){
  return d;
}).classed("person", true);

문서요소수와 데이터의 갯수가 같으면 update 가 일어난다.

2) No: of Data Points > No: of Elements (Enter Selection)

var myData = ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6"];
        var update = d3.selectAll("p").data(myData);
        update.enter().append("p");
        update.text(function(d){return d;}).classed("person", true); 
 
 

데이터의 개수가 문서요소의 수보다 많은경우 enter().append() 패턴으로 앨리먼트를 추가한 예제 

d3 version3에 경우정상적으로 동작하나 d3 version5에 경우 아래와 같이 동작한다. 

[d3 version3 실행결과]

[d3 version5 실행결과]

3) No:of Data Points < No:of Elements (Exit Selection)

var myData = ["Person 1", "Person 2"];
var update = d3.selectAll("p").data(myData);
update.exit().remove();
update.text(function(d){
  return d;
}).classed("person", true);

데이터의 개수가 문서의 요소수보다적은경우 exit().remove() 패턴을 이용하여 앨리먼트를 데이터에 맞개 삭제할 수 있다.

해당코드를 V3, V5버전에 실행후 아래와같이 같은 결과를 도출한다. 

version5 Enter메서드 변경

selection 항목의 요소와 부모는 절대 변경되지 않는다. selection.append 할경우 입력 노드 값을 업데이트 선택 항목에 병합하지 않는다.

데이터 결합후 enter와 update를 결합할려면 selection.merge메서드를 사용해야한다.

var myData = ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6"];
var update = d3.selectAll("p").data(myData);
update.enter().append("p");
update.text(function(d){return d;}).classed("person", true); 
// v3
 
 
 
var myData = ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6"];
var update = d3.selectAll("p").data(myData);
update.enter().append("p").text(function(d){return d;}).classed("person", true); 
// v5

[아래에 코드를 실행한경우]

var myData = ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6"];
var update = d3.selectAll("p").data(myData);
update.enter().append("p").merge(update).text(function(d){
  return d;
}).classed("person", true);

[enter(), merge()구문을 실행한경우 ]

var myData = ["Person 1", "Person 2"];
var update = d3.selectAll("p").data(myData);
update.exit().remove();
update.enter().append("p").merge(update).text(function(d){return d;}).classed("person", true);

[exit,enter,merge 구문을 사용한 예]

참조원문 

Changes in D3 5.0

Data-Driven Documents

D3 select , enter