D3 라이브러리 이해하기를 위해 각 모듈별로 간략한 정리를 남기고 있습니다.

d3-selection 이란?

d3-selection 는 D3 application의 핵심적인 라이브러리입니다.

DOM 컴포넌트를 동적으로 변경하거나 데이터 흐름의 스트림으로써 데이터를 select, bind, update, creating하는 표현인 operation을 연결해서 나타내는 DSL(도메인 특화된 언어)의 문법을 위한 모듈이라고 볼 수 있습니다.

이 모듈을 소개하면서 d3에 주로 사용되는 데이터 바인딩 전략 general update pattern을 함께 다뤄보겠습니다.

d3-selection에서 제공하는 기능

D3는 DOM 요소들에 데이터를 연결시키기위해 함수형 flow-based DSL을 제공하고 있습니다.

데이터 렌더링이라는 역할 관점에서 이 부분은 React가 대체 할 수 있을 여지도 있을 것 같습니다.

d3-selection 모듈은 아래와 같은 기능을 제공하고 있습니다.

• 표준 DOM API에 비해 덜 장황한 DOM 노드를 선택하는 방법을 제공
• Selection을 filtering 혹은 merging
• data를 element에 merging
• properties, attribute, style, class, contents를 수정
• 노드 트리에서 노드를 추가 제거하는 메소드
• handling and dispatching events
• 노드들의 정렬
• 노드들을 순회하면 임의의 함수 호출

위와 같이 많은 기능들을 제공하고 있습니다.

DOM 트리에서 DOM 요소와 매칭되는 스트링 패턴인selector를 이용해서 Selection Object(자식 요소들의 리스트와 부모 요소에 대한 참조를 가진)를 얻게 됩니다.

일단 우리가 selection object를 가지면 우리는 노드의 property들을 읽고 수정할 수 있을 뿐만 아니라 style, class, attribute, text content를 get, set할 수 있습니다.

물론 요소를 재정렬하거나 제거하거나 추가해서 DOM 트리의 구조를 변경할 수도 있습니다.

글로만 정리하면 무엇을 이야기하고 있는지 이해하기 어려우니 코드를 살펴보겠습니다.

select(), selectAll() 는 d3에서 사용하는 selector method입니다.

<div class="app"></div>

d3.select(".app")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500)
  .style("border, "1px solid black");

Selecting and Filtering elements

• d3.select(string | node)
• d3.selectAll(string | nodes)

위 두 함수를 통해 Selection 객체를 얻어낼 수 있습니다.

그리고 selection 객체의 select, selectAll 또 다른 selection 객체를 얻어낼 수도 있습니다. 아래처럼

• selection.select(string | function)
• selection.selectAll(string | function)

function을 인자로 받을 경우, callback function은 DOM element를 반환해야되며 결과적으로 그 element를 포함하는 Selection 객체가 반환되게됩니다.