애니메이션 효과를 사용하기 위해 사용하는 메서드는 transition(), delay(), duration() 입니다.
기존에 사용했던 가로그래프를 애니메이션의 효과를 제대로 보기 위해 버튼을 누르면 랜덤으로 dataSet의 데이터가 변하게 작성하겠습니다.
<test.html>
<!DOCTYPE html>
<html>
<head>
<style>
svg{
width: 500px; height: 240px; border:1px solid black;
}
#myGraph rect{
stroke : rgb(0, 100, 0);
stroke-width: 1px;
fill:rgb(0, 160, 0)
}
</style>
<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>
</head>
<body>
<h1>가로형 막대그래프</h1>
<button id = "update">업데이트</button>
<br>
<svg id="myGraph">
</svg>
<script src="auto.js"></script>
<br/>
</body>
</html><auto.js>
var dataSet = [400,200,90,190,240];
d3.select("#myGraph") //svg 요소 선택
.selectAll("rect")
.data(dataSet)
.enter()
.append("rect")
.attr("x",0)
.attr("y",function(d,i){
return i * 25;
})
.attr("width",function(d,i){
return d + "px";
})
.attr("height","20px")
d3.select("#update")
.on("click",function(){
for(var i = 0; i < dataSet.length;i++){
dataSet[i] = Math.floor(Math.random()*400); //클릭 시 0~400사이의 무작위값
}
d3.select("#myGraph")
.selectAll("rect")
.data(dataSet)
.attr("width",function(d,i){
return d + "px";
})
})
<실행결과>
가로형 막대그래프
1. transition()
transition()메서드는 추가시 자동으로 변환된 데이터를 애니메이션 처리를 해줍니다.
<auto.js>
var dataSet = [400,200,90,190,240];
d3.select("#myGraph") //svg 요소 선택
.selectAll("rect")
.data(dataSet)
.enter()
.append("rect")
.attr("x",0)
.attr("y",function(d,i){
return i * 25;
})
.attr("width",function(d,i){
return d + "px";
})
.attr("height","20px")
d3.select("#update")
.on("click",function(){
for(var i = 0; i < dataSet.length;i++){
dataSet[i] = Math.floor(Math.random()*400);
}
d3.select("#myGraph")
.selectAll("rect")
.data(dataSet)
.transition() // 변환 표시
.attr("width",function(d,i){
return d + "px";
})
})<실행결과>
가로형 막대그래프
2. delay()
delay()는 말 그대로 지연시키는 것입니다.
데이터의 표시 순서를 순번에 따라 순차적으로 적용합니다.
delay(function(d,i){return i *500;})으로 작성하면 0번째 데이터는 0*500밀리초, 1번째 데이터는 1*500밀리초 이후에 반영합니다.
<auto.js>
var dataSet = [400,200,90,190,240];
d3.select("#myGraph") //svg 요소 선택
.selectAll("rect")
.data(dataSet)
.enter()
.append("rect")
.attr("x",0)
.attr("y",function(d,i){
return i * 25;
})
.attr("width",function(d,i){
return d + "px";
})
.attr("height","20px")
d3.select("#update")
.on("click",function(){
for(var i = 0; i < dataSet.length;i++){
dataSet[i] = Math.floor(Math.random()*400);
}
d3.select("#myGraph")
.selectAll("rect")
.data(dataSet)
.transition()
.delay(function(d,i){return i*500;}) //순번 * 500밀리초
.attr("width",function(d,i){
return d + "px";
})
})<실행결과>
가로형 막대그래프
3. duration()
데이터가 그래프로 그려지는 순번은 delay()로 지정했지만 데이터가 그래프로 그려지는 시간은 duration()메서드를 이용하여 지정할 수 있습니다.
duration(2500)은 2500밀리초, 2.5초동안 그래프로 그리겠다는 의미입니다.
<auto.js>
var dataSet = [400,200,90,190,240];
d3.select("#myGraph") //svg 요소 선택
.selectAll("rect")
.data(dataSet)
.enter()
.append("rect")
.attr("x",0)
.attr("y",function(d,i){
return i * 25;
})
.attr("width",function(d,i){
return d + "px";
})
.attr("height","20px")
d3.select("#update")
.on("click",function(){
for(var i = 0; i < dataSet.length;i++){
dataSet[i] = Math.floor(Math.random()*400);
}
d3.select("#myGraph")
.selectAll("rect")
.data(dataSet)
.transition()
.delay(function(d,i){return i*500;})
.duration(2500) //2500 밀리초동안 애니메이션 진행
.attr("width",function(d,i){
return d + "px";
})
})<실행결과>
가로형 막대그래프
728x90
'데이터분석 > d3.js' 카테고리의 다른 글
| <D3.js> 가로막대 그래프 그리기(4) x축 눈금 표시 (0) | 2022.06.26 |
|---|---|
| <D3.js> 1. 가로막대 그래프 그리기(2)색, 데이터 변경 (0) | 2022.06.16 |
| <d3.js> 가로막대 그래프 그리기 1. 데이터를 그래프로 (0) | 2022.06.09 |
| D3.js로 그래프 그리기 1. 기본 개념 (1) 들어가기 앞서 (0) | 2022.06.04 |