꿈꾸는 데이터 디자이너 d3.js Transition & Animation

1. Songyi Lim www.attrs.co.kr
d3.js Transition & Animation
2015.5.16

2. Songyi Lim www.attrs.co.kr
오늘의 수업
실습이론
• 애니메이션 실습• d3.js 애니메이션 기능
오늘 어떤 애니메이션을 배우는지 궁금하시다면
http://www.attrs.co.kr/slides/01animation/index.html
로 접속해보세요!

3. Songyi Lim www.attrs.co.kr
d3.js Transition & Animation
d3.js Transition & Animation

4. Songyi Lim www.attrs.co.kr
d3.js Transition & Animation
.transition( )
d3.js 코드에서 변화 전, 후 사이에 추가하면
애니메이션처럼 변한다

5. Songyi Lim www.attrs.co.kr
d3.js Transition & Animation
변화하기 전의 코드
변화하고 나서의 코드
.transition( )

6. Songyi Lim www.attrs.co.kr
d3.js Transition & Animation
.duration( )
d3.js .transition( )의 지속 시간을 제어
단위 : ms
기본값 : 250ms = 0.25s

7. Songyi Lim www.attrs.co.kr
d3.js Transition & Animation
.ease( )
d3.js .transition( )의 특징 설정
기본값 : cubic

8. Songyi Lim www.attrs.co.kr
d3.js Transition & Animation
.delay( )
d3.js .transition( )의 지연시간 설정
단위 : ms

9. Songyi Lim www.attrs.co.kr
d3.js Transition & Animation
.on( )
마우스를 올리거나 클릭했을 때 나타나는 액션
옵션 내용
click 클릭했을 때
mouseover 마우스를 올렸을 때
mouseout 마우스를 밖으로 이동했을 때

10. Songyi Lim www.attrs.co.kr
d3.js Transition & Animation
실습