D3 - 개요 및 사용법

D3란?

D3는 데이터를 시각화 하는 라이브러리이다. 수치 데이터를 웹 브라우저에서 그래프로 변경하고 렌더링 할때 사용한다. 주로 서버와 같이 연동하며 서버의 내용이 변경되었을시 그래프를 새로 그릴 수 있는 형태를 지원한다. 

Import

1 2 3 4 5

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.14.2/d3.js" integrity="sha256-x4D7g5KkbQk6aRjxRFqlCsyMytoqhcisSwVVsVepuuE=" crossorigin="anonymous" ></script>

사용법

D3는 jquery와 비슷한 사용법을 지닌다. 함수 체이닝 문법을 사용하며, 선택자를 통한 요소 선택 및 기본적인 메서드가 jquery와 유사하다.

1 2 3 4 5 6 7 8

var data = ["80,30", "120,210", "180,110", "210,200"]; var circles = []; var y_step = [0, 30, 60, 90, 120, 150, 180, 210]; var x_step = [0, 30, 60, 90, 120, 150, 180, 210]; var svg = d3.select("svg"); // jquery와 비슷하게 선택자 사용 var path = svg.append("path"); path.attr("fill", "none"); // jquery 처럼 attr을 통한 편집 path.attr("stroke", "black");

위에 써 있 듯이 수치 데이터를 시각화 하는게 d3의 목적이기 때문에 수치 데이터를 따로 지정하는데 위의 1번 라인과 같이 수치를 가지고 있다가 세부 내용을 넣거나 바인딩 할 때 사용한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

data.forEach(function(ele, idx) { if (idx == 0) { line += "M" + ele.match(/(\d+)(?:\,)/i)[1] + "," + (400 - ele.match(/(?:\,)(\d+)/i)[1]); } /* 생략 */ }); svg .selectAll("circle") .datum(data) // 이걸 해야지 밑의 d,i가 연결된다 .on("mouseover", function(d, i) { d3.select(this).attr("stroke", "red"); // d - 연결한 데이터들 // i - 선택한 요소의 idx /* 생략 */ }); };

또한 위의 mouseover 처럼 jquery와 유사한 형태로 이벤트를 추가하는 것 또한 가능하다.

트랜지션

D3는 트랜지션을 통해 변화하는 데이터에 대해 애니메이션을 줄 수 있다. 사용할 수 있는 큰 옵션으로는 ease, duration, delay 등 세 가지가 있으며 사용 방법은 하기와 같다.

1. ease - Easing.zip 파일 다운로드시 실제 돌아가는 움직임 및 해당 옵션을 확인할 수 있으며 이 내용은 움직임의 가속도를 의미한다. (easeElastic / easeBounce / easeLinear / easeSin / easeQuad / easeCubic / easePoly / easeCircle / easeExp / easeBack)     

2. duration - 총 움직이는 시간을 의미한다.

3. delay - 얼마큼 기다린 후에 움직일지를 의미한다.

보간 및 시간별행동(?)

transition과 연계되는 기능으로서 특정 시간 동안 변화하는 단게를 초당 60~100단위로 나누어 callback을 실행합니다. 이 때 시간에 따라 변화하는 data를 구하고 그걸 return 할 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

function tweenPie(idx) { const interpolate = d3.interpolate( (data[idx].startAngle * Math.PI) / 180, (data[idx].endAngle * Math.PI) / 180 ); return function(d) { return function(t) { // attrTween 을 통해 받은 진행율 data[idx].endAngle = interpolate(t); // 이걸 통해서 다시 그려줘야 함.. var arc2 = d3 .arc() .innerRadius(0) .outerRadius(100) .startAngle(data[idx].startAngle) .endAngle(data[idx].endAngle); return arc2(); }; }; } circle_2.datum(data[1]) // callback 에다가 데이터를 매개변수로 bind 해준다 .transition() .ease(d3.easeExp) .duration(500) .delay(2000) .attrTween("d", tweenPie(1)); // 움직이는 과정을 대략 60~100번 나누어서 실행하는것

여기서 attrTween이 중요한데, 이 메서드가 시간별행동기능을 실행하는 부분이다. 두번째 매개변수인 tweenPie 는 일종의 팩토리 함수이며 (앵귤러의 factory와 비슷한 느낌...리턴형식이 지정된 정도? 아..아니다 커리함수로 생각하는게 더 나을듯).

interpolate 또한 중요한데 이것은 보간기능으로써 (숫자 n과 m사이의 단계들을 나타냄 이라고 이해하는게 빠르다 0과 1 사이에 0.111~0.999  같이) 호출 할 때마다 다음 단계를 리턴해준다. 위 예제 에서는 시작 앵글과 끝 앵글의 단계에 현재 진행율을 곱해 현재 값을 구하였다.

주로 쓰이는 보간의 종류는 하기와 같다.

숫자 interpolateNumber(start, end)

- 숫자를 시작 값 에서 끝 까지 보간해준다.

RGB interpolateRgb("red", 10)(0.5), RGB interpolateRgb("red", "green")

- 특정 색상을 뒤의 단위로 건너뛰어가면서 보간해준다.

문자열 interpolateString("시작N","끝M")

- 문자열 안에 들어 있는 숫자를 보간해준다.

Released under the The MIT License.