Как правильно сделать перерендер в react (hooks и d3.js)?

Question

[gsdev99]

Всем привет. Подскажите, пожалуйста, где именно я ошибся. В следующей реализации задача изменить state и перерисовать график с новыми данными. Вместо этого я его создаю заново.
https://codepen.io/gsdev99/pen/eYmYzKE
Можно сделать следующее в функции draw():
d3.select(chart.current).html('')
Но, не уверен, что это правильное решение. К тому же предполагается что path должен перерисовываться анимировано.

Comments

[Петр Мухуров]

if (chart.current) {
   ...
   draw();
}

при каждом запуске рендера, вы запускаете draw(), который аппендит svg

[Владимир]

https://habr.com/ru/post/354806/

[darktowerk56c]

Петр Мухуров, Спасибо. d3.select(chart.current).html('') решает данную проблему. Но не выходит сделать анимацию на path.

Answer 1

[0xD34F]

https://jsfiddle.net/gqa2wrkp/

Comments

[gsdev99]

Большое спасибо. Ещё один небольшой вопрос: шкалы таким образом анимировать не получится?

chart.svg.select('#xAxis')
    .transition(d3.easeLinear)
    .duration(1000)
    .call(d3.axisBottom(chart.xScale));

chart.svg.select('#yAxis')
    .transition(d3.easeLinear)
    .duration(1000)
    .call(d3.axisLeft(chart.yScale).tickSize(chart.graphWidth))
    .call(g => g.select('.domain').remove())
    .call(g => g
      .selectAll('.tick:not(:first-of-type) line')
      .attr('stroke-opacity', 0.5)
      .attr('stroke-dasharray', '2,2')
    )
    .call(g => g.selectAll('.tick text').attr('dy', -4));