D3.js는 전환(transition)을 이용하여 애니메이션을 지원해줍니다.
우선 간단한 코드를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>Simple transitions</h3>
<script>
d3.select("body").style("background-color", "lightblue")
// make the background-color lightblue.transition()
.style("background-color", "gray");
// make the background-color gray
</script>
</body>
</html>body태그를 선택 후 스타일로 배경색을 블루로 했지만 트랜지션으로 회색으로 배경색이 바뀌게 됩니다.
duration()
이 메서드는 바로 변경하지 않고 지정해준 초만큼 부드럽게 전환시켜주는 효과를 가져옵니다.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>Simple transitions</h3>
<script>
d3.selectAll("h3").transition().style("color","green").duration(5000);
</script>
</body>
</html>위 코드처럼 duraton을 5초로 준다면 h3태그의 스타일을 5초 동안 초록색으로 전환시켜줍니다.
d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000);만약에 위에처럼 rgb로 속성을 지정해주면 0~150까지 색이 5초동안 부드럽게 바뀌게 됩니다.
Interpolate()
이 메서드는 보간법을 활용합니다.
InterpolateNumber : 숫자 값 지원
InterpolateRgb : 색상 지원
InterpolateString : 문자열을 지원
또한 커스텀 가능합니다.
delay() 메서드
지정해준 초 후에 전환이 발생합니다.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3> Simple transitions </h3>
<script>
d3.selectAll("h3").transition()
.style("font-size","28px").delay(2000).duration(2000);
</script>
</body>
</html>폰트 사이즈를 28px로 2초 후 2초 동안 전환해줍니다.
전환의 생명 주기
1. 전환 예약
2. 전환 시작
3. 전환 실행
4. 전환 종료
이러한 라이프 사이클을 가지고 있습니다.
전환 예약
selection.transition을 호출 시 전환이 예약됩니다.
전환 시작
지정된 지연(delay,duration)을 기반으로 전환이 시작됩니다.
전환 실행
0에서 1까지 전환 값으로 반복 호출됩니다.
전환 종료
종료 시간은 1으로써 지연 시간 + 지속 시간 값으로 종료가 됩니다.
이때 end 이베트가 발생하빈다.
'웹 > JavaScript,JQurey' 카테고리의 다른 글
| 자바스크립트- 구구단 게임 (0) | 2019.07.21 |
|---|---|
| D3.js 공부 9 - 막대차트 그리기(part1) (0) | 2019.04.16 |
| D3.js 공부 7 - transition(전환) (0) | 2019.04.10 |
| D3.js 공부 6 - SVG 변환 (0) | 2019.04.10 |
| D3.js 공부 5 - SVG (0) | 2019.04.03 |
