Чтение CSV-файла для Graph

Я знаю, что это, вероятно, глупый вопрос, но я не могу, хоть убей, понять, как передавать данные из файла 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, где будет построен график. Пожалуйста помоги.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
917
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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"));

Другие вопросы по теме