我想使用 D3 和 Chartjs 在 React 中绘制本地 CSV 的前 100 行

如何解决我想使用 D3 和 Chartjs 在 React 中绘制本地 CSV 的前 100 行

import React,{ useEffect,useState } from 'react'
import {Bar,Line,Bubble,Radar,Doughnut} from 'react-chartjs-2'
import Hbl_true from './Datasets/true.csv'
import Hbl_pred from './Datasets/pred.csv'
import * as d3 from 'd3';



const Barchart=(props)=> {




    var hbl_true=[]
    var hbl_pred=[]
    var date=[]
    var pie_true=[]
    
    useEffect(()=>{

        d3.csv(props.true,function(CSV) {  
            hbl_true.push(CSV.True)//true stock prices
            date.push(CSV.Date)//dates pushed 
          });

         d3.csv(props.preds,function(CSV) {  
            hbl_pred.push(CSV.Predicted)//predicted stock prices
          });

    })


    return <div>
        <div className="block-example border border-primary" style={{display:'flex',justifyContent:"center",alignItems:"center",marginTop:"50px"}} >
    
    {/* this is a Line Chart */}
    <div>
    <Line
    height={400}
    width={600}
    options={{maintainAspectRatio:false}}
    data={{
        labels:date,datasets:[
            {
                label: 'True Prices',backgroundColor: 'rgba(255,99,132,0.2)',borderColor: 'red',borderWidth: 2,lineTension: 0,poinTradius:0,hoverBackgroundColor: 'rgba(255,0.4)',hoverBorderColor: 'rgba(255,1)',data:hbl_true,fill:false
            },{
                label: 'Predicted Prices',data:hbl_pred,fill:false,backgroundColor: 'green',borderColor: 'green',borderWidth: 3,}
        ]
    }}
    />
    </div>
    </div>
}
export default Barchart

上面的代码绘制了 1000 行的整个 CSV，但我只想加载 CSV 的前 100 行并通过 chartsJS 绘制它们。

请帮助我只获取 100 行本地 csv 并绘制它们。

我已经使用 useEffect 通过 D3 加载 CSV。

有没有办法在加载后切片或只加载 100 行而不是所有行？