[D3.js] D3.js 이란

velog.io/@smooth97/-Data-Visualizing-D3.js-%EB%9E%80

 

Data- Driven Documents. Js

 

데이터 중심의 문서의 약자로 자바스크립트 기반의 라이브러리 언어이다.

사용자가 입력한 시각화 규칙을 바탕으로 데이터를 반영해서 시각화 결과물을 생성한다.

 

데이터 시각화 프레임워크로 잘 알려져 있고, html5의 svg을 통해서 다양한 화면 해상도에서도 깨짐없는 보기가 가능하다.

 

 

- D3 동작 과정

Loading: 시각적 요소를 그리기 전 보여주고자 하는 데이터를 불러온다.

Selecting-Bindling: 시각적 요소안에 데이터 수치를 입력한 코드에 맞춰 연동시킨다.

Transform: 그래프의 유형, 색상, 축 등 다양한 요소가 지정된다.

Transition: 클릭, 드래그 등 인터렉션 효과를 지정한다.

 

 

- SVG란

Scalable Vector Graphics

웹용 벡터그래픽으로 html 문서에 직접 포함시키거나 삽입할 수 있다.

인터넷 익스플로러 8 이하를 제외한 모든 브라우저에서 지원한다.

=> 코드작업으로 이미지 편집 가능

=> 품질 손상없이 확대/축소 가능

 

 

- 주요 함수

대부분의 d3 함수는 결과값으로 선택물의 참조를 반환한다.

함수를 체인으로 연결할 때는 순서가 중요하다.

어떤 함수와 반환 값 타입은 체인으로 연결된 다음 함수가 기대하는 입력값과 맞아야 한다.

 

* 메서드체인이란, .와 함께 메서드를 체인처럼 연결함으로써 코드 한줄에 여러 동작을 실행할 수 있는 기법이다.

 

d3.select() : 현재문서에서 특정 태그 하나를 선택하는 함수

d3.selectAll() : 특정 태그 전체를 선택

.data() : 참조 연결할 데이터를 가져온 후에 선택된 태그에 대한 데이터를 매칭한다.

.enter() : 데이터 개수만큼 태그가 부족할때, 부족한 개수만큼 placeholder를 반환한다.

.append() : 새로운 태그를 추가한다.

.exit() : 종료 (더이상 필요없는 태그를 반환한다).

.remove() : 현재 문서에서 선택된 태그를 제거한다.