D3.js 1편 : Introduction

What is D3.js ?

데이터를 DOM 과 바인딩 해주고, 데이터의 변경을 DOM 에 반영해 주는 라이브러리.

html, css, svg 로 구성되며 함수형 프로그래밍 스타일로 작성된다.

d3 가 하는 것은 DOM 노드와 데이터를 바인딩 해주는 것이고, 디자인이나 애니메이션은 브라우저의 네이티브 API 를 이용하는 것이기에 브라우저의 새로운 기능이 추가되도 바로 d3 프로젝트에 도입이 가능하다는 장점이 있다.

DOM 선택

d3에서는 getElementById 와 같은 DOM 선택 함수를 쓰지 않는다. 간단한 DOM 조작에도 코드가 길어지기 때문에, select 또는 selectAll 을 이용해 선언적 스타일로 DOM 을 선택한다.

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i);
  paragraph.style.setProperty("color", "blue", null);
}

d3.selectAll("p").style("color", "blue");

극단적인 예시이지만, 위 두 코드는 같은 일을 하는 코드이다.
Selector API 는 모던 브라우저들이 네이티브하게 지원하고 있으며, 태그 이름 뿐만 아니라 속성(attribute), 클래스명이나 아이디를 통해서도 DOM을 선택할 수 있다.

• d3를 통해 html DOM 을 얻고 싶다면 .select().node() 를 이용하면 된다.
• 특정 tag의 DOM을 선택하고 싶다면 .select('tagName')
• 특정 className 의 DOM을 선택하고 싶다면 .select('.className')
• 특정 id 의 DOM을 선택하고 싶다면 .select('#id')

데이터 바인딩

.data() 를 통해 DOM 과 데이터를 바인딩할 수 있다. 한번 바인딩 하고 나면 이전에 바인딩 한 값을 기억하고 있어서, 매번 .data() 함수를 호출하지 않아도 된다.

만약 DOM 노드의 갯수와 데이터의 갯수가 서로 다를 경우, enter() 와 exit() 메소드를 통해 서로 짝을 맞춰줄 수 있다.

• 노드 갯수보다 데이터의 숫자가 많은 경우, enter()와 append()를 통해 데이터갯수에 맞춰 DOM 노드를 생성할 수 있다.

d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
    .text(function(d) { return "I’m number " + d + "!"; });

• 데이터 갯수보다 노드의 숫자가 많은 경우, exit() 과 remove()를 통해 여분의 DOM 노드들을 없앨 수 있다.

d3.select("body")
  .selectAll("p")
  .exit().remove()

• 최근의 d3는 .join() 메서드 사용을 권장한다. 복잡하지 않은 경우, enter()와 exit()을 알아서 처리해준다.

Summary

d3 는 DOM 을 선택해 데이터를 바인딩 하고, 데이터와 바인딩된 DOM 노드를 생성하거나 제거함으로써 데이터 기반의 문서(Data Driven Documents, D3)를 만들 수 있게 도와준다.

d3 는 버전별로 메소드 호출 방식이 좀 다르기에 (d3.event() 가 어느 버전에서는 그냥 event() 라던지) 인터넷에 있는 예제를 살펴볼때 어느 버전을 기준으로 삼는지 유의해서 살펴봐야 한다.

2021년 1월 19일 기준 d3의 최신버전은 v6이다. 검색으로 나오는 예제들은 주로 v3 나 v4 가 많다.