D3.js 빠르게 알아보기

1. D3.js란?

- D3.js는 Data를 기반으로 데이터와 이미지를 바인딩하는 자바스크립트 라이브러리이다. D3는 HTML, SVG, 그리고 CSS를 이용해 데이터를 시각화할 수 있도록 지원해준다.

- D3의 웹 표준 강조는 강력한 시각화 구성요소와 데이터 기반 접근방식을 결합하여 독점적인 프레임워크에 자신을 묶지 않고 최신 브라우저의 모든 기능을 제공한다.

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

cf) D3갤러리

https://github.com/d3/d3/wiki/Gallery

2. D3.js 시작하기

1) svg를 이용해 그리기

-  d3.js는 jQuery사용법과 유사

// chart div요소 id로 선택후, svg를 추가함 const svg = d3.select(#chart) //요소 선택   .append("svg") //svg추가   .attr("class", "frame") //class를 frame으로 지정

- HTML에서 데이터 시각화를 하기 위해서는 div보다 SVG가 더 적합. SVG는 이차원 벡터 이미지를 그리기 위한 웹 표준임

(svg 좌표계에서 X축의 양의 방향은 왼쪽부터 오른쪽, Y축의 양의 방향은 위부터 아래 방향임)

- attr은 class 지정 든 css속성을 지정할 때 사용

2) Data연결하기

- json, csv, xml, text, 배열 등을 이용해 그래프를 그리는데 이용할 데이터를 넣을 수 있음

var data = [17, 33, 15, 30] d3.select("body").selectAll("div")   .data(data) // data를 설정   .enter() //데이터에 따라 div요소 생성   .append("rect"); //SVG에 div생성 (rect가 아니라 div나 circle등 어떠한 요소도 가능)

- 많은 데이터를 입력할시에는 selectAll를 이용하는게 편리, 그렇지 않으면 select를 여러번 해줘야 함.

  예를 들어 막대그래프에서 select를 한번하면 막대가 1번 그려지지만, selectAll을 이용하면 막대를 갯수만큼 그릴수 있음

3) Data에 실제 값 넣기 : x,y좌표와 width, height를 이용

- 해당값이 설정되어야 시각화가 가능

- x,y좌표를 이용해 svg내 위치 조정

- width, height를 이용해 graph 크기 조정

# 가로로 된 막대그래프를 4개 그린다고 가정하고 아래의 속성을 넣음

... .attr("x", 0) //x좌표를 0으로 계산 .attr("y", function(d,i) {    return i * 25;  }) //막대 높이(y좌표)를 25 px단위로 계산 .attr("width", function(d, i){   return d + "px"; } .attr("height", "20px") // 막대 그래프 높이를 20px지정

 4) 축 그리기

(1) 축 scale 유형 및 범위 설정

- domain과 range를 이용해 축의 길이 및  눈금 설정 

  (domain은 원래 데이터 범위, range는 표시할 범위)

- axisLeft, axisRight 등은 축의 라벨 위치 선택

x = d3.scaleLinear().domain([0,w].range([300,0]) //위에 방법 외에 이렇게도 설정 가능x x = d3.scaleTime().rangeRound([0, w])  // x축 scale 유형 설정 rangeRound는 값을 정수값으로 반올림함

(2) 축 눈금 그리기

- chart에 g라는 그룹단위로 append하고 call을 해서 축을 그림

this.chart.append("g")  // g 요소 추가         .call(d3.axisLeft(this.y)  //y축의 값을 왼쪽에 배치 .ticks(5) // y축 눈금을 5개 그림

- 축 눈금의 갯수 및 값은 ticks나 tickValues()를 이용하면 됨

5) 레이블 추가, 혹은 특정 지점에 추가

- 컴포넌트를 만들어 select로 도형을 만들어 연결해주면 됨

d3.select(#tooltip).text("튤팁 text")    //튤팁에 텍스트 입력 .style("left", (data.cx + this.margin.left - 19) + "px")    .style("top", (data.cy + this.margin.top - 30) + "px")

6) 이벤트 넣기

- 클릭, 호버, 마우스 오버 등 이벤트 가능

d3.select("body").selectAll("#Button")   .on("click", function(){   dataSet = [20, 30, 40 ];   d3.select(#graph).data(dataSet).attr("width", function(d,i){return d+"px")})  }// 클릭이벤트 후, data를 재설정

- select 다음 .on()를 이용해 특성에 맞는 이벤트 가능 

.on("mouseover", handleMouseOver) //mouseOver시 handleMouseOver 함수 실행   .on("mouseout", handleMouseOut) // mouseOut시 handleMouseOut 함수 실행

7) 애니메이션 넣기

- transition() 뒤에 아래처럼 변경하고자 하는 값을 명시하면 됨

- duration을 이용해 변경 시간 조정이 가능함

tooltipBox.text(showValue)    .style("left", (data.cx + this.margin.left - 19) + "px")    .style("top", (data.cy + this.margin.top - 30) + "px")    .transition()   .duration(2000)   .style("opacity", 1) // 2초동안 기존 설정된 opacity 값에서 opacity 값 1로 변화시킴

8) CSS 스타일 적용

- .attr과 .style을 이용해서 적용 가능

.attr("opacity",1) 혹은  .style("opacity", 1) 라고 select를 이용해 타겟을 정하고 연결해주면  CSS스타일 적용 됨

# One more thing

cx : 원의 중심 X좌표, 생략하면 0   /  cy : 원의 중심 Y좌표, 생략하면 0

d : data()로 연결해준 data, i : data()로 연결해준 data의 index

References : 

http://webframeworks.kr/getstarted/d3js/

https://m.blog.naver.com/PostView.nhn?blogId=sol9501&logNo=220191616651&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F