[D3.js] D3.js 흐름

D3.js 기본적인 흐름

1. 데이터 읽어들이기

CSV(반점으로 구분된 텍스트), TSV(탭으로 구분된 텍스트), XML 형식 등 주요 데이터 형식을 읽어들일 수 있다. 또한 배열이나 json을 프로그램 내에서 이용할 수 있다.

2. 표시할 그래프 지정

데이터로부터 그래프를 표시해야 할 좌표를 계산해 반환한다. 이 계산을 수행하고자 D3.js 레이아웃 객체를 지정. 직접 데이터를 해석해 프로그램을 작성해 처리할 수도 있지만, 원 그래프나 트리맵 등은 D3.js에 있는 개체를 이용해 계산하는 것이 훨씬 편리하다.

3. 그래프를 그리는 데 필요한 SVG 도형 요소 준비

그래프를 표시할 때 D3.js에서는 일반적인 SVG 요소를 생성한다. Dom요소나 Canvas 요소도 생성할 수 있지만, 데이터 수에 따라 자동으로 요소의 수를 변경하여 애니메이션을 적용할 수 있는데, 이럴 때 SVG를 사용하는 것이 효과적이다.

4. 요소의 속성값 변경

요소의 속성값 처리는 중요하다. 그래프를 어떻게 표시할 것인가가 여기서 결정된다. 속성값을 변경하는 attr()메서드와 스타일을 변경하는 style() 메서드의 두가지만 기억하면 충분하다.

5. 필요하다면 애니메이션 처리

transition()메서드 뒤에 변경하고자 하는 속성값을 지정하기만 하면 애니메이션을 쉽게 적용할 수 있다. SVG와 함께 사용함으로써 역동적인 애니메이션을 볼 수 있다.

6. 필요하다면 이벤트에 따른 처리

마우스 클릭 등의 이벤트에 따라 그래프를 변화시킬 수 있다. 이벤트는 on() 메서드를 통해 처리한다.