[D3.js] Timer 함수

오늘은 d3.timer()함수에 대해 간단히 실험을 해볼까 합니다. 이 함수는 간단하면서도 데이터 시각화에 유용한 함수입니다. 그러면 어떻게 동작하는지 간단히 알아 봅시다.

1. d3.timer 함수

참조 : https://github.com/d3/d3-timer

d3.timer(callback[, delay[, time]]);

위와 같이 타이머 함수의 기본 구조입니다. 간단히 타이머 동작을 실행시키는 예제가 위 링크된 참조 게시물에 있는 소스가 있어서 인용하여 실험을 해보았습니다.

<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
 
var t = d3.timer(function(elapsed) {
  console.log(elapsed);
  if (elapsed > 100) t.stop();
  
}, 200);
</script>
</body>

위 소스에서 elapsed은 현재 타이머 시간이고 그 시간값을 다음 if문에서 100보다 크게 되면 t.stop() 함수로 타이머를 종료 할 수 있습니다. 즉, stop()함수로 타이머를 종료 할 수 있다고 보면 됩니다. 그리고 마지막에 200이란 숫자는 지연시간으로 타이머가 0.2초 동안 지연 된다고 보면 아마 될꺼에요. 이 값을 수정해서 여러분들도 테스트 해보세요.

[결과]

결과를 보시면 타이머가 계속동작하면서 설명보다는 소스를 보시고 이해하시면 아마 쉽게 이해하실 겁니다. elapsed 값이 94.995에서 111로 넘어간 후 t.stop으로 타이머는 멈추게 됩니다. elapaed라는 변수는 다른 이름으로 하셔도 됩니다. 인용이라서 그냥 기존 변수명을 그대로 사용 했네요.

2. 예제

참고 인용 : https://bl.ocks.org/jonsadka/4edd58e2bd5b66733d4a

또 다른 Timer 함수를 사용한 예제를 보면 좋을 것 같아서 지난 시간에 SVG 300x300인 캔버스에 circle(원)을 그리는 실험을 해봤었죠. 그걸 타이머 함수를 이용하여 랜덤으로 출력해보면 좋을 것 같아서 코딩할까 했는데 더 좋은 실험 예제가 있나 구글링 해보니 다양한 예제가 있었는데 가장 간결한 예제를 찾았는데 제가 생각했던 코딩이 MIT의 저작권이 있는 코딩이 있더군요. 그냥 이 코딩을 인용하여 동작만 간단히 실험해 봤네요.

캔버스 영역

var svg = d3.select("body").append("svg")
    .attr("width", 300)
    .attr("height", 300);

캔버스 영역을 300x300 크기로 지정해 보았습니다.

timer 동작

d3.timer(function() {
  랜덤 원 그리기;
}

다음으로는 타이머 함수이겠죠. 타이머 함수 안에서 랜덤 원을 그리게 됩니다.

랜덤 원 그리기

svg.append("circle")
    .attr("cx", function(){return Math.random()*300;})
    .attr("cy", function(){return Math.random()*300;})
    .attr("r", 5)
    .attr("fill",d3.rgb(Math.random()*255,Math.random()*255,Math.random()*255));

이 부분이 중요한데 cx,cy 랜덤 좌표에 반지름이 5인 원을 그리게 되는데 Math.random()함수를 사용하는게 중요합니다. 이 함수를 통해서 랜덤한 위치가 지정되니깐요. 여기서 'fill'은 채우기로 여기에서 지난시간에 배운 d3.rgb() 함수를 이용하여 RGB 값을 랜덤 함수로 랜덤색을 만들면 캔버스 영역에 랜덤 위치에 반지름이 5인 원이 랜덤색으로 그려지게 됩니다.

종합해보면,

[소스] : 소스는 이미 누군가 먼저 코딩했기 때문에 저작권은 MIT쪽이 맞을 듯 싶네요. 소스는 여기에 올리면 안될 것 같아 보이지만 위 설명한 코딩이 정상적으로 동작하는지 보기 위해서 어쩔 수 없이 완성된 전체 소스를 올렸네요.

<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
 
var width = 300, height = 300;
 
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
 
d3.timer(function() {
    .attr("cx", function(){return Math.random()*300;})
    .attr("cy", function(){return Math.random()*300;})
    .attr("r", 5)
    .attr("fill",d3.rgb(Math.random()*255,Math.random()*255,Math.random()*255));
});  
</script>
</body>