9. 아날로그 시계 - D3

이번에는 D3로 구현해 본다.

D3는 데이터 시각화 프레임워크로 알려져 있는데

SVG(Scalable Vector Graphic)를 쉽게 사용하도록 해준다.

자세한 내용은 찾아보길 바라고

SVG와 D3의 사용법과 변환에 대한 설명은 여기를 참고 하면 된다.

SVG와 D3의 관계는

자바스크립트와 JQuery의 관계와 유사하다.

한마디로 쉽게 사용하게 해준다는 것이고

실제로 D3 사용법은 JQuery사용법과 비슷하다.

D3와 관련해서 여기서 알아야 할 것은

getElementById 대신에 select를 사용한다 [라인 3].

createElementNS와 appendChild로 생성하던 것을

append로 한번에 생성한다.

setAttribute함수 대신에 attr함수를 사용하고

style 속성이 아닌 style 함수를 사용한다.

attr와 style 함수는 달라진 것이 없는 것 같지만

Json을 이용하여

한번에 많은 속성이나 style을 지정할 수 있다.

(setAttributes 함수 처럼)

그리고 편리한 method chaining이 있다.

이것은 다음 코드에서 보는 것처럼

지정된 노드(태그)에 메소드(함수)를 이어서 사용하는 것이다.

이러한 기능으로 인해

중복 코드 처리를 위해 작성한

createElement, setAttributes 함수가 필요 없다.

<script src="http://d3js.org/d3.v3.min.js"></script> var clock = d3.select("#clock"); var center = parseInt(clock.style("height")) / 2; var radius = center * 0.90; drawFace(radius); drawNumbers(radius); var hourHand = drawHand(0, 0, radius*0.07); var minuteHand = drawHand(0, 0, radius*0.07); var secondHand = drawHand(0, 0, radius*0.02); drawClock(); function drawClock() { drawTime(radius); setTimeout(drawClock, 1000); } function drawFace(radius) { clock.append("circle").attr("cx", center).attr("cy", center).attr("r", radius).attr("class", "face"); clock.append("circle").attr({"cx": center, "cy": center, "r": radius*0.1, "fill": "#000"}); } function drawNumbers(radius) { var pos = radius*0.85; for (var num = 1; num < 13; num++) { var x = pos * Math.cos(Math.PI* ((30 * num)-90)/ 180); var y = pos * Math.sin(Math.PI* ((30 * num)-90)/ 180); var text = clock.append("text").attr({"x": x+center, "y": y+center, "class": "number"}).text(num); text.style("font-size", radius*0.15 + "px"); } } function drawTime(radius){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var pos = radius*0.5; //hour x = pos* Math.cos(Math.PI* ((hour*30)- 90 + 30/60*minute + 30/60/60*second) / 180); y = pos* Math.sin(Math.PI* ((hour*30)- 90 + 30/60*minute + 30/60/60*second) / 180); hourHand.attr({"x1": center, "y1": center, "x2": x+center, "y2": y+center}); //minute pos = radius*0.8; x = pos * Math.cos(Math.PI* ((minute * 6)- 90 + 6/60*second)/ 180); y = pos * Math.sin(Math.PI* ((minute * 6)- 90 + 6/60*second)/ 180); minuteHand.attr({"x1": center, "y1": center, "x2": x+center, "y2": y+center}); // second pos = radius*0.9; x = pos * Math.cos(Math.PI* ((second * 6)- 90)/ 180); y = pos * Math.sin(Math.PI* ((second * 6)- 90)/ 180); secondHand.attr({"x1": center, "y1": center, "x2": x+center, "y2": y+center}); } function drawHand( x, y, width) { var hand = clock.append("line").attr({"x1": center, "y1": center, "x2": x+center, "y2": y+center, "class": "hands"}); hand.style("stroke-width", width); return hand; }

clock6.html

먼저 D3를 사용하기 위해 d3.js파일을 포함해야 한다.

간단하게 배포하기 위해

D3 사이트에서 제공하는 파일을 연결했다 [라인 1].

d3.select로 SVG 태그를 찾아서 clock변수에 지정한다 [라인 3].

그리고, 필요한 도형들을 추가(append)로 간단하게 생성한다.

예로, 원(circle)을 추가만으로 생성하고

메소드 체인으로 속성을 지정하였다 [라인 22].

attr("cx", center).attr("cy", center).attr("r", radius).attr("class", "face")

이렇게 생성할 수도 있지만

23라인과 같이

필요한 속성을 Json으로 묶어서 한번에 처리할 수도 있다.

일부러 22와 23라인 코드를 두가지 방식으로 구현하였으니

선호하는 방식을 이용하면 된다.

D3에서는 문자열을 출력하기 위해

TextNode를 생성하지 않고

Text 함수를 호출한다 [라인 32].

Text 생성은 메소드 체인과 Json을 같이 사용하여 간단하게 생성하였다.

마지막으로 시, 분 초 시계 바늘을

매초마다 이동시키는 것도

각 변수 속성을 Json으로 한번에 지정하였다 [라인 47, 53, 59].

이 정도면 D3의 장점과 특징을 간단하게 나마

파악하고 익힐 수 있을 것이다.

지금까지 아날로그 시계를

Canvas에서

기준 축을 이동시켜서 구현하는 방법

삼각 함수로 계산해서 구현하는 방법을 정리하였다.

그리고, 삼각 함수로 구현 것을 SVG와 D3로 구현하였다.

하나의 아날로그 시계를 구현하는데,

Canvas에서는 그림처럼 그렸고

SVG에서는 태그를 생성하였다.

D3에서는 몇가지 함수를 호출 하는 것으로 SVG를 구현하였다.

이상의 코드들을 자세히 본다면

Canvas, SVG, D3처럼 개발하는 도구(프레임워크 또는 개발언어)는 바뀌어도

변하지 않는 것(알고리즘, 수식 등)이 있다는 것을 알 수 있다.

변하지 않는 것을 공부하는 것이 중요할 것이다.

이외에도 자바 스크립트로 DIV를 생성해서 구현할 수도 있다.

자바 스크립트 대신에 JQuery로 구현할 수도 있다.

여기에서는 정리하지 않지만

직접 해보면 실력 향상에 많은 도움이 될 것이다.