Как сделать анимацию на path в d3.js?

Подскажите, пожалуйста, как сделать анимацию на 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 логические части

  1. Создание узлов (svg nodes по английски) графика. (весь код до функции update в твоем примере)
  2. Установление значение данных этим узлам. (функция update в твоем примере)

Из-за этой строчки d3.select(chart.current).selectAll('*').remove() анимация невозможна в принципе. Чтобы анимировать path, он уже должен существовать в некоторыми аттрибутами, потом ты меняешь аттрибуты и анимация применяется.

Спасибо