-
D3.js란 무엇일까?
Data Driven Documents.JavaScript 의 약어로
데이터 중심의 문서(Data Driven Documents)의 약자로 자바스크립트 기반의 라이브러리 언어이다. 사용자가 직접 입력한 시각화 규칙을 바탕으로 데이터를 반영해 시각화 결과물을 생성한다.
데이터 시각화 프레임워크로 잘 알려져 있고 HTML5의 SVG(Scalable Vector Graphic)을 통하여 다양한 화면 해상도에서도 깨짐없는 Visualizing이 가능하다.
D3 동작과정
- Loading - 시각적 요소를 그리기 전 보여주고자 하는 데이터를 불러온다.
- Selecting-Binding - 시각적 요소 안에 데이터 수치를 입력한 코드에 맞춰 연동한다.
- Transform - 그래프의 유형, 색상, 축 등 다양한 요소 지정이 가능하다.
- Transition - 클릭, 드래그 등 인터렉션 효과 지정이 가능하다.
작업 순서
- 데이터를 불러온다
- 작업할 공간을 선택한다.
- 공간에 불러온 데이터를 연결(바인딩)한다.
- 각각 연결한 것을 원하는대로 그린다.
SVG
Scavle Vector Graphics
웹용 백터그래픽으로 HTML 문서에 직접 포함시키거나 삽입할 수 있다.
인터넷 익스플로러 8 이하를 제외한 모든 브라우저에서 지원한다.
- 코드 작업으로 이미지 편집 가능
- 품질손상없이 확대/축소 가능
D3 Method
대부분 D3 method는 결과 값으로 선택물의 참조를 반환하므로, method를 체인으로 연결할때 순서가 매우 중요하다. 어떤 메서드의 반환 값 타입은 체인으로 연결된 다음 method가 기대하는 입력 값과 맞아야 한다.
Method Chain이란 구두점(.)과 함께 method를 체인처럼 연결함으로써 코드 한 줄에 여러 동작을 실행할 수 있는 기법이다.
- d3.select() - 현재 문서에서 특정 태그 하나를 선택하는 메서드
- d3.selectAll() - 특정 태그 전체를 선택
- .data() - 참조 연결할 데이터를 가져옴 (선택된 태그에 대한 데이터를 매칭한다)
- .enter() - 데이터 개수 만큼 태그가 부족할때, 부족한 갯수만큼 플레이스 홀더를 반환한다.
- .append() - 새로운 태그 추가
- .exit() - 종료 (더이상 필요없는 태그 반환)
- .remove() - 현재 문서에서 선택된 태그를 제거
예시
var dataset = [ 15, 5, 32, 20, 21 ]; d3.select("body") // 1 .selectAll("p") // 2 .data(dataset) // 3 .enter() // 4 .append("p") // 5 .text("hi d3!"); // 6첫 번째 줄에서 데이터 배열을 불러왔다. (csv, tsv, json 등) 파일에서 데이터를 불러올 수도 있고, 서버에서 데이터를 reponse받을 수도 있다.
d3.select("body") method로 <body>태그를 선택하였다. 그 다음 .selectAll("p")로 앞에서 선택한 <body>태그의 자식 노드로 있는 모든 <p>태그를 선택하였다.
.data(dataset)으로 데이터를 불러와 바인딩 하였다.
.enter()를 통해 바인드가 되지 않은 <p>태그에 데이터를 넣어 새로운 selection을 반환하였다.
.append("p")를 통해 해당 데이터 공간 수 만큼 문서요소를 만든다.
.text("hi d3!"); 로 해당 p 태그들에 text를 삽입한다.
<body>태그에 <p>태그가 2개 있을 때 결과
p태그 내용1 p태그 내용2 hi d3! hi d3! hi d3!'D3' 카테고리의 다른 글
채광량에 따른 키우기 쉬운 농작물 예제 (0) 2021.07.12 D3.js 차트 컴포넌트 (0) 2021.07.04 D3.js <svg> 요소 (0) 2021.06.28 D3.js (0) 2021.06.27