d3 React JS: d3.csv is importing index.html instead of csv file
Question
I'm trying to use the d3-request library in my react App.js file to import and parse data in a .csv file. When I output the resultant data to the console, it is returning an array of lines from the App.js file instead of from the target csv file. What am I missing?
App.js
import React, {Component} from 'react';
import {csv} from 'd3-request';
import './App.css';
import Chart from './components/chart'
const API_URL = "https://nataliia-radina.github.io/react-vis-example/";
class App extends Component {
constructor(props) {
super(props)
this.state = {
results: [],
};
}
render() {
csv("./data/test.csv", function(error, data) {
if (error) throw error;
console.log(data);
});
const {results} = this.state;
return (
<div className="App">
<Chart data={results}
/>
</div>
);
}
}
export default App;
test.csv
col1,col2,col3
hi,there,buddy
console output
(39) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, columns: Array(1)]
0:{<!DOCTYPE html>: "<html lang="en">"}
1:{<!DOCTYPE html>: " <head>"}
2:{<!DOCTYPE html>: " <meta charset="utf-8">"}
3:{<!DOCTYPE html>: " <meta name="viewport" content="width=device-width"}
4:{<!DOCTYPE html>: " <meta name="theme-color" content="#000000">"}
5:{<!DOCTYPE html>: " <link rel="manifest" href="/manifest.json">"}
6:{<!DOCTYPE html>: " <link rel="shortcut icon" href="/favicon.ico">"}
7:{<!DOCTYPE html>: " <title>React App</title>"}
8:{<!DOCTYPE html>: " </head>"}
9:{<!DOCTYPE html>: " <body>"}
10:{<!DOCTYPE html>: " <noscript>"}
11:{<!DOCTYPE html>: " You need to enable JavaScript to run this app."}
12:{<!DOCTYPE html>: " </noscript>"}
13:{<!DOCTYPE html>: " <div id="root"></div>"}
14:{<!DOCTYPE html>: " <script type="text/javascript" src="/static/js/bundle.js"></script></body>"}
15:{<!DOCTYPE html>: "</html>"}
columns:["<!DOCTYPE html>"]
length:39
__proto__:Array(0)
4 answers
solution1
3 2018-07-09 18:53:34
Try importing the data first:
import React, {Component} from 'react';
import {csv} from 'd3-request';
import './App.css';
import Chart from './components/chart';
import data from './data/test.csv';
const API_URL = "https://nataliia-radina.github.io/react-vis-example/";
class App extends Component {
constructor(props) {
super(props)
this.state = {
results: [],
};
}
render() {
csv(data, function(error, data) {
if (error) throw error;
console.log(data);
});
const {results} = this.state;
return (
<div className="App">
<Chart data={results}
/>
</div>
);
}
}
export default App;
solution2
1 2019-07-29 08:34:33
csv(url) -- This will send a request to the server to get the file.
keep this test.csv file in public folder and try accessing it like csv("/test.csv") I have tried and it has worked.
I am not sure about the line number 2, the below import statement of csv worked for me..
import {csv} from "d3"
solution3
1 2020-02-04 16:27:53
Your best option is to keep your csv file in the public folder of the react project.This is the best route to go. You don't need to create a server.
In my situation, I kept the data.csv file in react's public folder. I proceeded to make the call:
d3.csv('./data.csv').then(data => console.log(data));
Another option in making this call is to use %PUBLIC_URL%/data.csv as indicated on the create-react-app website. Read more about the public folder here - https://create-react-app.dev/docs/using-the-public-folder/
solution4
1 2020-11-12 01:46:46
I also experienced something similar, from my testing I have figured out that if something is not served on the server (your .csv file in this case), it re-directs the unknown file path as index.html. I don't know why it does that. I still haven't found the way to serve data inside data folder. One solution is to store the data directly inside the public folder and link it as " /filename.csv " or ( process.env.PUBLIC_URL +"filename.csv") inside a JS file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.