折线图重新绘制动画，从右侧引入线条

Question

深入研究在 React 中使用 Recharts，我觉得我快疯了！所有教程和示例代码线图都有这种漂亮整洁的动画，感觉就像从右到左绘制线一样。但是，我已经设置了它，并且出于某种原因，动画使我的折线图上的线条从右侧浮动。我有以下行为的 gif：

我摆弄了动画选项（缓动、缓入等）、持续时间、启用或禁用动画等。无论我做什么，它总是从右侧漂浮。

有一种方法可以让图表正确地自行绘制 - 如果我将其放在高度为 0 的 div 内，然后手动将高度更改为 600px，那么动画将以预期的方式播放，否则我会得到奇怪的结果浮动右侧线。

如上所述，这是一个 React 应用程序，下面包含我的折线图的渲染代码。

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>
}

Answer 2

我遇到了同样的问题，我通过在第一次数据加载后强制重新安装 LineChart 组件来解决它。这是一个简单的解决方案：

const AnimatedChart = ({ data }) => {
  const hasLoadedRef = useRef(false);
  
  if (data && !hasLoadedRef.current) {
    hasLoadedRef.current = true;
  }

  return (
    <LineChart 
      width={500} 
      height={300} 
      data={data}
      key={hasLoadedRef.current ? 'loaded' : 'initial'}
    >
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
    </LineChart>
  );
};