======================================================================
D3.JS 공식 사이트 https://d3js.org/
======================================================================
데이터를 시각화 해주는 데 가장 HOT한 라이브러리인 D3.JS 현재 구축중인 플랫폼도 반응형으로 D3.JS로 대쉬보드를 만드는 중인데 계속 공부할 겸 올리겠다.
d3.js 라이브러리의 버전은 v5.2.0을 사용할 계획이다. 대부분 나와있는 차트들은 v3 or v4이지만 새로나온 v5로 하겠다.
SVG를 잘 알고 가자.(HTML5의 가장 큰 특징 중 하나이다.)
D3는 SVG를 그릴 수 있는 추상 계층을 제공한다.
D3에서는 circle, rect, line, polygon, path, g, text 요소를 사용한다.
circle은 cx(가로축), cy(세로 축), r(원의 반경)
d3.select('#container_chart')
.append('svg')
.append('circle')
.attr('cx','100') //가로 위치
.attr('cy','140') //세로 위치
.attr('r',10) //원의 반경
rect[rectangle(직사각형)의 약자]는 x(가로축), y(세로축), width(너비) height(높이)
d3.select("#container_chart")
.append('svg')
.append('rect')
.attr('x',10)
.attr('y',90)
.attr('width', 15)
.attr('height', 100)
.style('fill','#ff5274');
line은 말그대로 선이다. x1,y1으로 시작위치를 x2,y2로 끝나는 지점을 지정 가능
d3.select("#container_chart")
.append('svg')
.append('rect')
.attr('x1',0)
.attr('y1',0)
.attr('x2', 100)
.attr('y2', 100)
.style('stroke','#1c1c1c');
polygon은 다각형 그래픽을 만들 때 유용하다. 시계방향으로 진행하며 다각형의 각 꼭지점의 XY좌표를 POINTS라는 속성에 포함
d3.select("#container_chart")
.append('svg')
.append('polygon')
.attr('points',"40,60 80,50 90,110 20, 320 10, 50")
.style('fill','#1c1c1c');
path요소는 d라는 속성에 좌표를 포함한다. M으로 시작한다 Z로 닫으면 종점이 연결된다.(닫힌 도형)
d3.select("#container_chart")
.append('svg')
.append('path')
.attr('d',"M 40,60 80,50 90,110 20, 320 10, 50 Z")
.style('stroke','#1c1c1c')
.style('stroke-width','6px');
text요소는 svg에서 텍스트를 작성할 수 있게 해준다.
d3.select('#container_chart')
.append('svg')
.append("text")
g는 svg의 요소들을 논리적으로 그룹핑한다.