[D3.js] 1. Selection & Dynamic Property & Enter and Exit

D3는 Data Driven Document의 약자로써, 데이터를 DOM과 바인딩함으로써 시각화하는데 사용되는 자바스크립트 라이브러리이다.  

처음 D3를 접하면서 든 생각은 jQuery와 매우 흡사하다는 것이다. D3와 jQuery의 가장 뚜렷한 차이점은, Style과 Attribute 등의 Property에 들어가는 값이 상수 뿐만 아닌, 함수도 가능하다는 점이다. 

      d3.selectAll("p").style("color",(d,i)=>{
        return i%2 ?"yellow":"blue";
      });

위 예시는 HTML의 P태그들을 순서대로 홀수번째 노드는 노란색을, 짝수는 파란색으로 색을 입히는 기능을 한다. selectAll에 의해 선택된 P태그는 배열의 형태로 지정이 되며, i는 각 노드들의 Index값이다. 

이 때, 특정 데이터를 바인딩해 줌으로써 데이터를 시각화 할 수 있는데, 그때에 바인딩 된 데이터가 바로 d라고 할 수 있다. 데이터를 바인딩 한 예시는 다음과 같다. 

  d3.selectAll("p")
    .data([10,20,30,40,50,60])
    .style("font-size",(d,i)=>{
    return `${d}px`;
  });

이처럼, 첫 번째 파라미터는 바인딩된 데이터의 i번째 객체를, 두번째 i는 0부터 시작되는 index를의미하며, 이는 Select한 노드의 갯수와 일치하게 된다.

만약, 바인딩한 데이터의 수와 셀렉트한 노드의 갯수가 다를 경우 어떻게 처리할 수 있을까?

.enter()함수를 사용함으로써 부족한 노드를 생성해 줄 수 있다.

    d3.selectAll("p")
      .data([10,20,30,40,50,60,70])
      .enter()
      .append("p")
      .text((d,i)=>{
        return `i am ${i+1}th ptag!`;
    })

이와 반대로 바인딩 된 데이터의 갯수보다 노드의 갯수가 많다면, exit()함수를 입력함으로써 남은 노드를 삭제할 수 있다.

이처럼, 데이터를 바인딩하고, 부족한 노드를 생성 및 삭제하는 패턴은 다음과 같이 작성될 수 있다.

var p = d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
    .text(function(d) { return d; });
 
// Enter…
p.enter().append("p")
    .text(function(d) { return d; });
 
// Exit…
p.exit().remove();

위 코드에서 만약, Document에 존재하는 p태그의 갯수가 6개 이상이라면 n-6개의 p태그가 삭제되며, 그 반대의 경우 n-6개의 태그가 생성된다.

이러한 D3의 특징으로 인해 다양한 함수를 재사용 할 수 있으며, 좀 더 동적인 그래프 생성이 가능하다. 예를 들어, 바 그래프를 생성할 경우 Bar의 Default 갯수를 정한 후, 추가적인 데이터가 바인딩 됨에 따라 bar의 갯수를 늘려갈 수 있다. 또한 각 bar의 색상을 랜덤으로 지정해 주는 등 다양한 방법으로 동적인 그래프를 생성할 수 있다.