[D3.js] Circle 심심풀이 놀이
[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 클릭 애니메이션 실험
[실험소스]
<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>
[결과]
![](https://steemitimages.com/0x0/https://i.imgur.com/1CcBod7.gif)
마무리
오늘 새벽부터 눈이 포근하게 내렸는데 아침이 되니깐 무지 쌀쌀하고 춥네요. 눈이 어느정도 쌓였네요. 진짜 공부하기 싫은 하루네요. 연말이여서 그런가 오늘은 과거 했던 거 조금은 날로 먹는 post를 작성했네요. 복습 post로 생각하세요.
짱짱맨 호출에 응답하여 보팅하였습니다.
감사합니다.
휘황 찬란한 폭죽을 보는듯 합니다.
휘황찬란한 새해가 되었음 좋겠네요^^
스팀이 활기를 다시 찾았으면 하네요.
눈 내린 지역이 있는가보네요.
서울도 날씨는 엄청 춥습니다!
Posted using Partiko Android
새벽 4시쯤에는 조금 날리는 듯 했는데 아침 되니깐 제법 내렸네요.
공부 너무 열심히 하시는 것 같아요. 년말인데 쉬면서 하세요 ㅋㅋ
연말이여서 그런가 공부가 좀 하기 싫어지네요.
노는 중!
오 클릭할때마다 색이 바껴 더 예뻐보여요.
여기서, 조금만 생각의 관점만 바꾸면 더 다양한 표현이 가능해져요.
한번 저 원이 어떻게 움직이면 더 재미 있을지 상상해보세요.
예뻐요 ^^
물글뭉글각양각색 ~~~
차트는 움직임이 들어가면 간단한 것이라도 멋있는 것 같아요.