d3.js의 ease 메소드를 고집해 data를 생생하게 표현하자

이것은 Data Visualization Advent Calendar 2014의 20 일째 게시물입니다.



data를 plot하는데 있어서 매우 편리한 d3.js 하지만, 시계열 등에 의한 "변화"도 표현할 수 있도록(듯이) 편리한 함수가 몇개인가 갖추어져 있습니다.

기본적으로는 transition이나 tween 메소드로 천이 시킵니다만, 그 때의 움직임을 지정하는 ease 메소드를 조금 고집해 사용하는 것만으로 매력적인 표현이 됩니다.

자신도 요전날, 비에 관한 트윗을 표시하는 작품을 발표했습니다만, 그 중에서도 간단하게 사용하고 있습니다. ( htp : // / rld - ny-c-ck. 어리석은 p. 코m/ )

기본

svg.select("circle").transition()
    .duration(10)
    .ease("linear")
    .attr("cy", 10)

transition에 이어, 천이에 걸리는 시간, 움직임, 천이 후의 상태등을 지정해 갑니다.
ease가 움직임의 지정입니다.

ease의 움직임의 지정은 기본의 이하에 가세해, 말미에 -in , -out , -in-out , -out-in

linear

quad

cubic

sin

exp

circle

elastic

back

bounce

각각이 어떤 움직임인지는 다음이 참고가 됩니다.
htp // bl. 오크스. 오 rg/훗 zy/9929724

인수를 취할 수 있는 것

앞서 소개한 움직임의 종류 중에는 인수를 취해 미세 조정할 수 있는 것이 있습니다.
예를 들면 linear-in 입니다.

.ease("elastic", 1, 0.8)

elastic 는 천이 끝에 비요요~라는 느낌으로 늘어나는데, elastic 가 흔들림 폭, 1 가 탄력 같은 느낌이라고 생각합니다. 이 편은 조정하면서 좋은 상태를 지정했습니다.

그 밖에 어느 움직임에 인수를 지정할 수 있을까는 공식 문서의 이하를 봐 주세요.
htps : // 기주 b. 코 m / m보 s와 ck / d3 / 우키 / T 란시 치온 s # 에아 신 g

(덧붙여서 위의 값은 앞서 소개한 작품 내의 지구의 회전으로 사용하고 있는 것입니다.)

발전

그리고 더욱 고집하고 싶은 경우, ease에는 독자적인 함수도 줍니다.
다음이 도움이되지만, 반드시 build-in의 움직임으로 좋을 때가 많지 않습니까?

마지막으로

모처럼 d3.js에는 여러가지 easing이 갖추어져 있으므로, 아무것도 생각하지 않고 0.8 를 지정하는 것이 아니라, 여러분의 data를 보다 매력적으로 보이는 움직임을 지정해 보는 것은 어떨까요.
그럼!