JS와 D3를 이용한 시각화(Visualization): d3-transition-animation

D3.js - Transition - Animation

D3 - Transition method

Transition method 개요
transition()
transition.duration
transition.delay
transition.ease

D3.js - Transition - Animation 관련 페이지 보기

D3 - Transition method

Transition method 개요

D3에서 애니메이션(Animations)은 DOM 요소의 현재 상태(시작 상태)에서 종료 상태로의 전환(Transition)을 의미한다.

D3는 Transition을 사용하여 용이하게 애니메이션(Animations)을 구현할 수 있다. Selection method을 사용하여 DOM 요소를 선택하고 Transition method를 사용하여 Transition을 실행한다. D3 애니메이션에는 아래와 같은 Method를 사용한다.

selection.transition(): Transition을 실행할 DOM 요소를 선택한다.
transition.duration(): 각 요소의 애니메이션 시간을 mSec 단위로 설정한다.
transition.delay(): 각 요소의 애니메이션 지연 시간을 mSec 단위로 설정한다.
transition.ease(): Easing 함수를 지정한다. (예 : linear, elastic, bounce 등)

transition()

transition() method는 모든 선택된 DOM 요소에 대하여 Transition 프로세스를 시작한다.

이 Method는 attr(), style() 등과 같은 대부분의 D3 메서드를 지원한다. 그러나 transition() Method 보다 먼저 호출되어야 하는 append() 과 data() Method는 지원하지 않는다.

그러나 duration(), ease() 등과 같이 Transition을 위한 Method를 지원한다

transition() method의 간단한 예

위 HTML 문서를 복사하여 d3-transition-simple.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 "D3 transitions" 문장이 red로 출력된다. 원래 <h3>의 기본 색은 black 이지만 전환이 즉시 실행되어 red로 출력된다.

transition.duration

duration() Method

duration() 메서드를 사용하면 속성 변경이 지정된 시간 동안 매끄럽게 발생한다. 다음 예는 duration() 메서드를 사용하여 전환 시간을 3초로 설정한 예이다.

duration() method를 사용하여 전환을 매끄럽게하는 프로그램 예

위 HTML 문서를 복사하여 d3-transition-duration.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 처음에는 "D3 transitions" 문장이 Green 색으로 표시되고, 점점(smoothly) 색이 전환되어 3초 후에는 Red로 전환된다.

transition.delay

delay() Method를 사용하면 일정 시간 후에 변환(Transition)이 실행된다.

delay() method를 사용하여 전환 시작 시간을 지연 시키는 예

위 HTML 문서를 복사하여 d3-transition-delay.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 처음에는 "D3 transitions" 문장이 12px 크기로 출력되고 2초 후에 변환이 시작되어 2초 후에는 32px 크기로 전환된다.

transition.ease

ease() 함수는 전환(Transition) 모션을 지정하고 제어하는 데 사용된다.

ease는 여러가지 모드가 있고 매개변수에 따라 다른 특성을 갖기 때문에 아래 자료를 참고 바람.

참고자료: d3-ease

Easing 모션을 비교하는 예(아래 d3-transition-ease.html)

위 버튼을 클릭하면 해당 Ease 모드로 애니메이션이 실행된다.

Easing mode의 이해를 위한 프로그램 예

<!doctype html>
<html>
<head>
  <script type = 'text/javascript' src = 'https://d3js.org/d3.v6.min.js'></script>
</head>
   <body>
      <h3>D3 easing mode testing</h3>
    <script>
	let svg = d3.select("body")
		// <body>에 SVG를 첨부한다.
		.append("svg")
		.attr("width", 200)
		.attr("height", 50);

// Easing mode 테스트를 위한 도형을 초기화한다.
	// x, y (20, 20) 위치에 폭 10, 높이 10인 사각형을 그린다.
	let bar1 = svg.append("rect")
        .attr("fill", "blue")
        .attr("x", 20)
        .attr("y", 20)
        .attr("height", 10)
        .attr("width", 10)

// 인수로 Easing mode를 전달 받는다.
	function update(easeMode) {
		// svg의 모든 Element를 삭제한다.
		svg.selectAll('*').remove();
		// Easing mode 테스트를 위한 도형을 초기화한다.
		// x, y (20, 20) 위치에 폭 10, 높이 10인 사각형을 그린다.
		let bar1 = svg.append("rect")
			.attr("fill", "blue")
			.attr("x", 20)
			.attr("y", 20)
			.attr("height", 10)
			.attr("width", 10)
		// Transition을 실행한다.
		bar1.transition()
			.ease(easeMode)
			.duration(2000)
			.attr("width",100)
	}
    </script>
	
	<table>
		<tr>
			<th><button onclick="update(d3.easeLinear)">easeLinear</button></th>
			<th><button onclick="update(d3.easeElastic)">easeElastic</button></th>
			<th><button onclick="update(d3.easeBounce)">easeBounce</button></th>
			<th><button onclick="update(d3.easeSin)">easeSin</button></th>
			<th><button onclick="update(d3.easeQuad)">easeQuad</button></th>
		</tr>
		<tr>
			<th><button onclick="update(d3.easeCubic)">easeCubic</button></th>
			<th><button onclick="update(d3.easePoly)">easePoly</button></th>
			<th><button onclick="update(d3.easeCircle)">easeCircle</button></th>
			<th><button onclick="update(d3.easeExp)">easeExp</button></th>
			<th><button onclick="update(d3.easeBack)">easeBack</button></th>
		</tr>
	</table>

<h4>위 버튼을 클릭하면 해당 Ease 모드로 애니메이션이 실행된다.</h4>

</body>
</html>

위 HTML 문서를 복사하여 d3-transition-ease.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 여러가지 Ease 모드로 애니메이션을 실행하여 볼 수 있는 버튼이 출력된다. 각 버튼을 클릭하여 여러가지 Ease 모드로 애니메이션을 실행하여 볼 수 있다.

D3.js - Transition - Animation 관련 페이지 보기

페이지

d3-transition-animation