[D3.js] 막대형 차트에 애니메이션 효과 부여

codingman (64)in #kr-dev • 6 years ago

[D3.js] 막대형 차트에 애니메이션 효과 부여

지난 시간에 막대형 차트와 간단한 애니메이션 효과를 실험해 보았습니다. 지난 시간에 다룬 내용을 기반으로 두가지 내용을 합쳐서 간단한 실험을 해보도록 하겠습니다. 내용은 막대형 차트를 기본베이스로 하고 이 막대 이미지를 애니메이션 효과를 부여하는 실험입니다.

1. 막대형 차트 예제

출처 : November 5, 2013Mike Bostock - Let’s Make a Bar Chart

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>codingman</title>    
    <style>
    .chart div {
      font: 10px sans-serif;
      background-color: steelblue;
      text-align: right;
      padding: 3px;
      margin: 1px;
      color: white;
    }
    </style>
  </head>
  <body>
    <div class="chart"></div>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>
      var data = [10, 20, 30, 40, 50];

      d3.select(".chart").selectAll("div").data(data)
        .enter().append("div")
        .style("width", function(d) { return d*10 + "px"; })
        .text(function(d) { return d; });
    </script>    
  </body>
</html>

위 기본소스는 지난시간에 다룬 내용입니다. 위 내용을 모를 경우 [D3.js] 막대형 차트로 보는 D3.js post를 읽고 오시면 됩니다.

[결과]

2. 위 막대형 차트를 애니메이션 효과 부여

       .transition() 
         .duration(2000)  
                 이동좌표;

위 코딩만 사용 합니다. 막대이니간 막대를 2초동안 특정이동좌표로 이동하라는 명령코딩을 내릴 수 있습니다.

막대형 차트와 합쳐서 코딩을 하면 다음과 같습니다.

  <script>
       var data = [10, 20, 30, 40, 50];

      var div = d3.select(".chart").selectAll("div").data(data)
           .enter().append("div")
             .style("width", "0px")
             .transition()   
             .duration(2000)               
             .style("width", function(d) { return d*10 + "px"; })
           .text(function(d) { return d; });
</script>

위 코딩은 style()함수로 초기 시작위치는 width값을 0px로 하였습니다. 그리도 애니메이션 효과로 데이터 값의 길이만큼 그려지게 표현 했네요.

[결과]

3. 역방향 애니메이션 효과

위에서 왼쪽에서 오른쪽으로 막대가 이동했다면 반대로 이동하는 것을 궁금해 해야 합니다. 그러면 반대의 경우는 어떻게 이동 할까요.

방금 했던 코딩에서 한줄만 제거 하시면 됩니다.

  <script>
       var data = [10, 20, 30, 40, 50];

      var div = d3.select(".chart").selectAll("div").data(data)
           .enter().append("div")
//           .style("width", "0px")
             .transition()   
             .duration(2000)               
               .style("width", function(d) { return d*10 + "px"; })
             .text(function(d) { return d; });
</script>

시작 위치를 0px로 안하면 됩니다.

[결과]