Как делать анимацию круговой диаграммы d3.js при загрузке страницы?
Есть круговая диаграмма на d3.js сделанная, нужно этой диаграмме сделать анимацию при загрузке страницы. Чтобы она как нибудь красиво появлялась.
Как можно сделать такую анимацию?
Вот сама диаграмма: codepen.io/ArtiSimonenko/pen/EKdqPm?editors=0010
Погуглите d3 piechart transition/animation и так далее. Найдете миллион примеров. В вашем случае можно сделать какую-нибудь анимацию изменения радиуса вначале.
Я вот неделю назад от нефиг делать игрался, вот результат, вам подойдет (только все равно вначале нагуглите примеры с комментами чтобы все понять, если вы не знакомы с attrTween). codepen.io/suez/pen/dc6416d34803ff7f4db884e70c0ce7ab
Nikolay Talanov разбирался чуть не сутки, так и не смог найти решения для своей диаграммы. Спека непонятна, примеров не смог найти схожих, ваше решение под свои нужды подогнать тоже не получилось. Можете объяснить как делать анимацию частей диаграммы при загрузке страницы?
Хороший Человек: инициируете пайчарт с outerRadius рывным innerRadius. И потом сразу же делаете attrTween изменяя outerRadius на реальный (желаемый) радиус. Ну это вкратце.
Nikolay Talanov: но у меня значения radius прописано в объекте для каждой части графика. Тогда тут attrTween ни при чем получается, он же делает переход между значениями атрибутов. Или я что то не так понимаю?
