Как делать анимацию круговой диаграммы d3.js при загрузке страницы?

Question

[Хороший Человек]

Есть круговая диаграмма на d3.js сделанная, нужно этой диаграмме сделать анимацию при загрузке страницы. Чтобы она как нибудь красиво появлялась.
Как можно сделать такую анимацию?
Вот сама диаграмма:
codepen.io/ArtiSimonenko/pen/EKdqPm?editors=0010

Answer 1

[Nikolay Talanov]

Погуглите d3 piechart transition/animation и так далее. Найдете миллион примеров. В вашем случае можно сделать какую-нибудь анимацию изменения радиуса вначале.
Я вот неделю назад от нефиг делать игрался, вот результат, вам подойдет (только все равно вначале нагуглите примеры с комментами чтобы все понять, если вы не знакомы с attrTween).
codepen.io/suez/pen/dc6416d34803ff7f4db884e70c0ce7ab

Comments

[Хороший Человек]

Спасибо вам!

[Хороший Человек]

Nikolay Talanov разбирался чуть не сутки, так и не смог найти решения для своей диаграммы. Спека непонятна, примеров не смог найти схожих, ваше решение под свои нужды подогнать тоже не получилось. Можете объяснить как делать анимацию частей диаграммы при загрузке страницы?

[Nikolay Talanov]

Хороший Человек: инициируете пайчарт с outerRadius рывным innerRadius. И потом сразу же делаете attrTween изменяя outerRadius на реальный (желаемый) радиус. Ну это вкратце.

[Хороший Человек]

Nikolay Talanov: но у меня значения radius прописано в объекте для каждой части графика. Тогда тут attrTween ни при чем получается, он же делает переход между значениями атрибутов. Или я что то не так понимаю?