Перерисовать анимацию для линейного графика, приводящего строки с правой стороны

Question

Погружаясь в использование Recharts в React, я чувствую, что схожу с ума! Все учебные и примеры графиков кода кода имеют эту красивую аккуратную анимацию, которая выглядит так, как будто линия рисуется справа налево. Тем не менее, я настроил его, и по какой-то причине в анимации линии на моей линейной диаграмме всплывают с правой стороны. У меня есть GIF поведения ниже:

Я возился с параметрами анимации (легкость, простота, ETC), продолжительностью, включением или отключением анимации, ETC. Независимо от того, что я делаю, это всегда всплывает с правой стороны.

Есть один способ, которым я могу заставить диаграмму правильно рисовать себя - если я поместил ее в div с высотой 0, а затем вручную изменил высоту на 600px, тогда анимация будет воспроизводиться ожидаемым образом, в противном случае я получаю странное плавающее правые линии.

Как упоминалось выше, это приложение реакции, код рендеринга для моей линейной диаграммы приведен ниже.

render() {

  let linesToRender = [];
  for(let i = 0; i < this.props.driverNames.length; i++) {
    let lineColor;
    if(this.props.driverNames[i].current_score < 0) {
      lineColor = 'red'
    } else {
      lineColor = 'green'
    } 
    linesToRender.push(
      <Line animationDuration={5000} type='montone' dataKey= . {this.props.driverNames[i].display_name} stroke={lineColor} />
    )
    console.log(this.props.driverNames[i])
  }



return(
  <ResponsiveContainer width="100%" height="100%">
    <LineChart data={this.props.data} height={600} width={1000}>
      {linesToRender}
     <XAxis dataKey="date" padding={{left: 30, right: 30}}/>
     <YAxis/>
     <Tooltip/>
     <Legend />
    </LineChart>
  </ResponsiveContainer>
)

}

Хотите знать, если кто-то еще имел эту проблему или может предложить какие-либо рекомендации.

Answer 1

У меня была эта проблема. В моей ситуации я инициализировал свой график с data=[], который был быстро заполнен фактическими данными, которые я получил через запрос API.

Чтобы заставить мой график правильно отображаться и не прилетать со стороны, как вы говорите, я вообще запретил отображение графика, пока не убедился, что у меня есть массив данных. Может быть, вы можете сделать что-то вроде

{this.state.data.length > 0 &&
  <LineChart data={this.state.data} >
  </LineChart>
}