d3.js 사용법 - ① 개념 및 초기세팅

---

Data - Driven Documents. JavaScript
데이터 중심의 문서 (Data - Driven Documents)의 약자로 자바스크립트 기반의 라이브러리 언어

웹브라우저 상에서 동적인 정보시각화를 구현하기 위한 자바스크립트 라이브러리 
사용자가 입력한 시각화 규칙을 바탕으로 데이터를 반영해 시각화 결과물을 생성

---

D3 메소드

대부분의 D3메서드는 결과 값으로 선택물의 참조를 반환하므로, 메서드를 체인으로 연결할 때는 순서가 중요. 

 

d3.select() - 현재 문서에서 특정 태그 하나를 선택하는 메서드
d3.selectAll() - 특정 태그 전체를 선택
.data() - 참조 연결할 데이터를 가져옴 (선택된 태그에 대한 데이터 매칭)
.enter() - 데이터 개수 만큼 태그가 부족할때, 부족한 갯수만큼 플레이스 홀더를 반환
.append() - 새로운 태그 추가
.exit() - 종료 (더이상 필요없는 태그 반환)
.remove - 현재 문서에서 선택된 태그를 제거

 

 

 

사용법 

1. 홈페이지에서 다운로드 후 파일 추가 방식

    아래 홈페이지에서 D3.js 라이브러리를 다운로드 받은 후 이클립스 패키지 폴더에 추가 해놓으면 됨

https://d3js.org/

D3.js - Data-Driven Documents

     위 홈페이지에서 라이브러리를 다운 받고, 폴더에 추가까지 했으면 아래와 같이 스크립트 추가

     * 본인은 라이브러리 파일을 /js/chart/d3 폴더를 생성후 이 안에 넣어줬음 

<script src="<%=request.getContextPath()%>/js/chart/d3/d3.js" type="text/javascript"></script>

 

2. CDN 연결방식

    위와 같은 방식이 귀찮다면 아래와 같은 코드를 입력

<script src="https://d3js.org/d3.v7.min.js"></script>

 

여기까지 했으면 d3라이브러릴 사용할 준비완료

기본 차트 그리는 방식은 다음 포스팅 참조하기