[D3.js] Circle 심심풀이 놀이

codingman (64)in #dclick • 6 years ago (edited)

[D3.js] Circle 심심풀이 놀이

사전학습 : [D3.js] d3.on() 함수의 클릭 이벤트

연말이여서 그런가 D3.js 공부가 하기가 싫어지네요. D3.js 예제를 검색하다가 재밌는 것이 있어서 그냥 따라서 연습하려다가 예전에 Circle 클릭 이벤트 예제가 떠올라서 간단히 수정하는 걸로 이번 post를 만들어 보았습니다. 약간은 복습 post로 생각하시면 됩니다.

1. Circle 애니메이션

출처 : OMG Particles! - https://bl.ocks.org/mbostock/1062544
Mike Bostock’s Block 1062544
Updated August 1, 2018

위 출처의 가시면 재밌는 애니메이션 효과를 부여한 Circle 예제가 있습니다. 이걸 따라서 하는 것보다 예전에 만든 Circle 클릭 이벤트를 이용하여 만들어 보는 것이 좋을 것 같아서 도전해봅니다.

[인용]

d3.hsl((i = (i + 1) % 360), 1, .5)

색상 만들기 싫어서 그냥 위 틀을 그대로 인용합니다. 다른 방식의 접근을 위해서 그냥 랜덤 함수를 이용하여 백의 자리까지 숫자를 만들고 거기에 360으로 나눈 나머지값으로 360의 범위를 제한을 두어 색을 만들어 보았네요.

.attr("fill", d3.hsl((Math.random()*1000 % 360), 1, 0.5))

이 함수를 인용하여 실험을 해보도록 하겟습니다.

2. Circle 클릭 애니메이션 실험

[D3.js] d3.on() 함수의 클릭 이벤트

[실험소스]

<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
 
    var canvas = d3.select("body").append("svg")
         .attr("width",500)
         .attr("height",500)
         .style("background-color","yellow")
           .on("click", circleDrawing);

      function circleDrawing() {
          var mouseXY = d3.mouse(this);

          var circle = canvas.append("circle")
               .attr("cx",mouseXY[0]) //시작위치
               .attr("cy",mouseXY[1])
               .attr("r",25)    
               .attr("fill","blue")
                .on("mouseover",function(){d3.select(this).attr("fill","red");})
                .on("mouseout",function(){d3.select(this).attr("fill","blue");});            
      }
</script>
</body>

클릭 된 위치에 Circle 만드는 예전의 코딩이였는데 여기에 Circle의 색을 랜덤으로 하고 일정 형태로 변화는 애니메이션 효과를 부여 한 뒤에 소멸시키는 코딩으로 바꿔 보는 실험을 하겠습니다.

var circle = canvas.append("circle")
               .attr("cx",mouseXY[0]) //시작위치
               .attr("cy",mouseXY[1])
               .attr("r",0)    
               .attr("fill", d3.hsl((Math.random()*1000 % 360), 1, 0.5)) //랜덤색
               .transition()
                 .duration(3000) //3초동안
                 .ease(Math.sqrt) //애니메이션 부드럽게
                 .attr("r", 100)     //r=0에서 100까지 증가            
                 .remove(); //제거

수정 부분입니다. 랜덤색상과 3초동안 반지름 r을 0에서 100까지 증가시키는 애니메이션 효과를 부여하고 끝나면 remove()함수로 제거하는 동작을 수행하도록 마무리 했네요.

[전체소스]

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

    var canvas = d3.select("body").append("svg")
         .attr("width",500)
         .attr("height",500)
         .style("background-color","yellow")
           .on("click", circleDrawing);

      function circleDrawing() {
          var mouseXY = d3.mouse(this);

          var circle = canvas.append("circle")
               .attr("cx",mouseXY[0]) //시작위치
               .attr("cy",mouseXY[1])
               .attr("r",0)    
               .attr("fill", d3.hsl((Math.random()*1000 % 360), 1, 0.5)) //랜덤색
               .transition()
                 .duration(3000) //3초동안
                 .ease(Math.sqrt) //애니메이션 부드럽게
                 .attr("r", 100)    //r=0에서 100까지 증가
                 .remove();   //제거                       
      }
</script>
</body>

[결과]