[D3.js] 애니메이션 효과 순환 동작 | Ecency

[D3.js] 애니메이션 효과 순환 동작

지난 시간에 post 애니메이션 효과편으로 간단한 동작 실험을 했었죠. 오늘은 순환 호출 함수를 통해 애니메이션 효과 동작을 실행하는 원리를 살펴보고자 합니다.

1. 순환 호출 함수 원리

순환 호출이란 뭘까요. A라는 동작을 수행을 끝내고 난 뒤에 다시 A라는 동작을 호출하여 수행하는 반복 수행을 하는 것을 말합니다. 즉, 계속 똑같은 작업을 반복 수행한다고 생각하면 되겠죠.

D3.js에서 어떤 함수인지 살펴보도록 하죠.

transition.on(typenames[, listener]) (출처 : https://github.com/d3/d3-transition)
[타입] :

start - when the transition starts.
end - when the transition ends.
interrupt - when the transition is interrupted.

2. 순환 호출 실험

transition.on.on(start, 순환호출함수)

위 표현을 오늘 실험 합니다.

지난시간의 애니메이션 효과편에서 다룬 코딩을 이여서 실험을 해보도록 하죠.

배경 :

var svg = d3.select("body").append("svg")
    .attr("width", "300") //너비
    .attr("height", "300") //높이
    .style("background-color","blue"); //캔버스 배경색

빨간원 :

var circle = svg.append("circle")
    .attr("r", 30) //원의 반지름
    .attr("cx", 50) //캔버스 영역의 x좌표
    .attr("cy", 50) //캔버스 영역의 y좌료
    .attr("fill","red") //원의 색

여기서, 순환함수 호출

circle.transition()
        .duration(2000)
        .on("start", move);

빨간원에서 사용자정의함수인 move()함수를 호출하게 됩니다. move()함수 내 애니메이션 효과 코딩 명령을 수행하게 되는 것이죠.

애니메이션 효과 : 간단히 캔버스 영역을 한바퀴 도는 동작을 수행하는 명령으로 실험을 하겠습니다.

function move() {
  d3.active(this)   //자기자신을 가져오는건데 위를 지칭하겠죠
      .attr("cx", 250) //cx=250으로 이동
     .transition()    
      .attr("cy", 250) //cy=250으로 이동
     .transition()  
      .attr("cx", 50) //cx=50으로 이동
    .transition()
      .attr("cy", 50) //cy=50으로 이동
    .transition()
      .on("start", move); // 한바퀴돌고 난뒤에 다시 move 순환호출하는것인데 이러면 반복되겠죠
}

예전에 만들었던 동작으로 스팀잇 post로 가져왔네요. 한바퀴 돌게 됩니다. 여기서, cx와 cy은 캔버스 영역이고 이 값을 여러분들이 다른 숫자로 바꿔서 실험해 보세요. 어떻게 움직이는지 살펴 보셨으면 해요.

3. 결과

(1) 종합 코딩

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script src="https://d3js.org/d3.v5.min.js"></script>
  
  <script>

//var width=300, height=300;
var m_cx=250, m_cy=250;
var svg = d3.select("body").append("svg")
    .attr("width", "300")
    .attr("height", "300")
    .style("background-color","blue");    

var circle = svg.append("circle")
    .attr("r", 30)
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("fill","red")
    .transition()
     .duration(2000)
     .on("start", move); 

function move() {
  d3.active(this)   //자기자신을 가져오는건데 위를 지칭하겠죠
      .attr("cx", 250) //cx=250으로 이동
     .transition()    
      .attr("cy", 250) //cy=250으로 이동
     .transition()  
      .attr("cx", 50) //cx=50으로 이동
    .transition()
      .attr("cy", 50) //cy=50으로 이동
    .transition()
      .on("start", move); // 한바퀴돌고 난뒤에 다시 move 순환호출하는것인데 이러면 반복되겠죠
}
</script>
</body>
</html>

(2) 결과

마무리

오늘은 d3.js에서 지난시간에 애니메이션 효과에서 맛보기로 살펴 보았는데 오늘도 맛보기 두번째 시간으로 캔버스 안에 빨간원을 다른 움직임을 만들고 그 움직임을 반복 수행하도록 하기 위해서 on()함수를 살펴보았습니다. 뭔가 간단히 시각화 움직임을 처음에 만들어 내는 모습을 보셔야 D3.js에 흥미를 가질 수 있기 때문에 초반 post에 거론하게 되었네요.