Подскажите, пожалуйста, как сделать анимацию на path в d3.js
https://codepen.io/gsdev99/pen/GRgRWLW
В коде видны попытки добавлять transition, но к необходимому результату это не привело.
Подскажите, пожалуйста, как сделать анимацию на path в d3.js
https://codepen.io/gsdev99/pen/GRgRWLW
В коде видны попытки добавлять transition, но к необходимому результату это не привело.
Какую ожидаешь увидеть анимацию? Изменение кривой когда кликаешь на “изменить данные”? Или что-то другое?
Да, изменение кривой (https://www.d3-graph-gallery.com/graph/line_change_data.html).
Но так же пытался сделать анимацию при отрисовке: http://bl.ocks.org/atmccann/8966400
Не могу понять, что в моем решении я не правильно делаю. Но у меня задача сделать анимацию именно на изменение кривой. Кнопок в дальнейшем будет несколько и при вхождении новых данных кривая анимированно должна меняться.
Для анимации появления линии нужно играться не с теми аттрибутами с которыми работаешь ты. В примере работают с stroke-dasharray
и stroke-dashoffset
d3.select(path[0][1])
.attr("stroke-dasharray", totalLength[1] + " " + totalLength[1] )
.attr("stroke-dashoffset", totalLength[1])
.transition()
.duration(5000)
.ease("linear")
.attr("stroke-dashoffset", 0);
в твоем коде не указано какой аттрибут анимировать: d3.select('#priceChart').transition().duration(5000)
Для анимации графика при изменении значений нужно менять реализацию. Тебе нужно разбить реализацию рисования графика на 2 логические части
update
в твоем примере)update
в твоем примере)Из-за этой строчки d3.select(chart.current).selectAll('*').remove()
анимация невозможна в принципе. Чтобы анимировать path, он уже должен существовать в некоторыми аттрибутами, потом ты меняешь аттрибуты и анимация применяется.
Спасибо