仅对新数据图表进行动画处理或对图表进行替代

问题描述

我只想对图表中的新添加的数据点进行动画处理。现在，当出现新的数据点时，整条线将被重画。我该怎么实现呢？如果没有办法，有没有一个库可以做到这一点？

---

可复制示例

import React,{ useState,useEffect } from "react";
import { LineChart,XAxis,YAxis,Line } from "recharts";

function NewGraph() {
  const data = useData()

  return (
    <LineChart
      width={730}
      height={150}
      data={data}
      margin={{ top: 5,right: 30,left: 20,bottom: 5 }}
    >
      <XAxis type="number" dataKey="time" domain={[0,20]} />
      <YAxis dataKey="position" domain={[0,1]} />
      <Line
        strokeWidth="4"
        type="normal"
        dataKey="position"
        stroke="#8884d8"
        dot={false}
        animationEasing="linear"
        animationDuration={1000}
      />
    </LineChart>
  );
}

export default NewGraph;

为了创建一些随机数据，我在同一文件中创建了此自定义挂钩。但是，该挂钩不是我的问题，仅是为了方便重现该问题。

function useData(){
    const [data,setData] = useState([{position: 0,time: 0}]);
    useEffect(() => {
        let interval = setInterval(()=> {
                setData(prevData => [
                  ...prevData,{ position: Math.random()*10,time: prevData.slice(-1)[0].time+1 },]);},1000)
        return () => {
            clearInterval(interval)
        }
    },[])
    return data
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）