Data Join

Data Join이란?

기본적으로 이미 존재하는 Element에 데이터를 매핑하는 것이다. 그럼으로써 Element를 주입, 수정, 제거 할 수 있게 해준다.

Data set

[10, 20, 30, 25, 15]

HTML

<ul id = "list">
   <li><li>
   <li></li>
</ul>

D3.js code

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return d; });

위의 코드를 실행 하게 되면 아래와 같이 실행되게 된다.

10
20

현재 li Element가 2개만 실제로 존재하고 있기 때문에 3,4,5 번째 값은 출력이 되지 않는다.

나머지 값들이 출력되도록 하려면 조작을 해줘야 한다. Element가 없다면 생성하도록 해줘야 한다.

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return "This is pre-existing element and the value is " + d; })
   .enter()
   .append("li")
   .text(function(d) 
      { return "This is dynamically created element and the value is " + d; });

enter() 함수는 그래픽 요소가 없는 데이터 항목 집합을 출력 합니다. append() 함수는 data set에 기반하여 element를 생성 합니다.

동적으로 Element 제거

d3.selectAll("li")
   .data([10, 20, 30, 15])
   .exit()
   .remove()

exit() 함수는 데이터가 더 이상 존재 하지 않는 그래픽 요소 세트를 출력 합니다. 위에서 4번째 요소의 데이터가 없으니 해당 요소를 가져와서 remove() 시키는 것 입니다.