2013-03-01 2 views
1

this study에서 찾은 것과 같은 애니메이션을 만드는 데 d3을 사용하는 것이 얼마나 어려울까요? 특히, 막 대형 차트를 도넛 형 차트로 애니메이션하여 원형 차트에 부드럽게 표시 할 수 있습니까?d3 : Heer와 Robertson처럼 파이 차트로 변환하는 애니메이션 차트?

막대 차트에서 "rect"를 "d3.svg.arc"에서 형성된 "path"요소로 대체하는 것으로 시작하는 것이 었습니다. 거대한 반경을 가진 호를 사용했지만 그 쐐기만을 사용했습니다. 그래서 그것은 마치 거의 "rect"모양이지만 약간 구부러진 모양이었다. 대체가 완료되면 "경로"요소에서 호의 반지름과 각도에 애니메이션을 적용하고 원하는 도넛 모양으로 이동할 수 있습니다. 도넛에서 원형으로의 마지막 변환은 사소한 것일뿐 단순히 innerRadius에 애니메이션을 적용합니다.

그러나 이것을 수행하는 더 좋은 방법이 있는지 또는 이미 작성된 일부 플러그인이 있는지 알고 싶습니다.

+0

[이 예제] (http://d3-example.herokuapp.com/examples/showreel/showreel.html)에는 원하는 전환 효과 (거의)가 있습니다. –

+0

실제로 그렇습니다! 고맙습니다. 답변을 추가해야합니다. 다른 사람이 입력을했는지 알기 위해 하루나 이틀을두고 갈 수도 있지만 그게 내가 찾고 있던 것입니다. – Jonah

+0

찾고있는 다른 사용자 : http://jsfiddle.net/amitaviv99/x6RWs/42/이 게시물 http://stackoverflow.com/questions/16326978/d3-transitioning-from-bar-to-pie- and-back은 도움이 될 수 있습니다. –

답변