Question

我知道这可能是一个愚蠢的问题，但我不能为我的生活找出如何将数据从csv文件传递到组件以在d3中显示图表。我在reactjs中构建了所述图表，这是我一周前才开始学习的。

从网上尝试多种解决方案后，这是我尝试过的最新解决方案：

class Visitors extends React.Component{

    constructor(){

        super();

        this.state = {

            data: []
        }            

        this.updateData = this.updateData.bind(this);
    }

  componentWillMount() {


        var csvFilePath = "/lib/charts/data.csv";

        Papa.parse(csvFilePath, {
          header: true,
          download: true,
          skipEmptyLines: true,

          complete: this.updateData
        });
  }

  updateData(result) {
    const data = result.data;

    this.setState({data: data});

  }

    render(){

        let csvData = this.state.data.map(d => d);

        if(csvData.length > 0){

           let cd = 

                return(

                    <Fairway data={this.state.data}/>
                )

        }

        return (
            <div>
                <h3></h3>
                <div className="bottom-right-svg">
                    {cd }
                </div>
            </div>
        )
    }
};


ReactDOM.render(<Visitors/>,document.getElementById("top-line-chart"));

CSV中的数据正常，但我无法弄清楚如何将该数据传递到将构建图表的名为Fairway的组件。请帮忙。

Answer 1

自从我发布这个问题以来，几分钟过去了，我找到了解决方案。这是：

class Visitors extends React.Component{

    constructor(){

        super();

        this.state = {

            data: []
        }

        this.updateData = this.updateData.bind(this);
    }

  componentWillMount() {

        var csvFilePath = "/lib/charts/data.csv";

        Papa.parse(csvFilePath, {
          header: true,
          download: true,
          skipEmptyLines: true,

          complete: this.updateData
        });
  }

  updateData(result) {
    const data = result.data;

    this.setState({data: data}); 

  }

    render(){

        if(!this.state.data.length)
            return null;

        return (
            <div>
                <h3></h3>
                <div className="bottom-right-svg">
                    <Fairway data={this.state.data}/>
                </div>
            </div>
        )
    }
};


ReactDOM.render(<Visitors/>,document.getElementById("top-line-chart"));

读取Graph的CSV文件

1 个答案: