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





Прошло всего несколько минут с тех пор, как я разместил этот вопрос и нашел решение. Поехали:
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"));