如何使用 d3 v4 读取 CSV？

Question

I'm just having a little trouble understanding the documentation for CSV Parse with D3. I currently have:

d3.parse("data.csv",function(data){
    salesData = data; 
});

But I keep on getting the error:

Uncaught TypeError: d3.parse is not a function

What is this supposed to look like? I'm just a little confused, and the only examples that I could find was something like this .

I also tried something like:

d3.dsv.parse("data.csv",function(data){
    salesData = data; 
});

and got:

Uncaught TypeError: Cannot read property 'parse' of undefined

Why is this happening? Any help would be greatly appreaciated, thanks!!

Answer 1

There is some misunderstanding here: you're confusing d3.csv , which is a request, with d3.csvParse , which parses a string (and also mixing D3 v3 syntax with D3 v4 syntax). This is the difference:

d3.csv (D3 v4)

The d3.csv function, which takes as arguments (url[[, row], callback]) :

Returns a new request for the CSV file at the specified url with the default mime type text/csv. (emphasis mine)

So, as you can see, you use d3.csv when you want to request a given CSV file at a given url.

For example, the snippet below gets the CSV at the url between quotes, which looks like this...

name, parent
Level 2: A, Top Level
Top Level, null
Son of A, Level 2: A
Daughter of A, Level 2: A
Level 2: B, Top Level

... and logs the parsed CSV file, check it:

 d3.csv("https://gist.githubusercontent.com/d3noob/fa0f16e271cb191ae85f/raw/bf896176236341f56a55b36c8fc40e32c73051ad/treedata.csv", function(data){ console.log(data); });

 <script src="https://d3js.org/d3.v4.min.js"></script>

d3.csvParse

On the other hand, d3.csvParse (or d3.csv.parse in D3 v3), which takes as arguments (string[, row]) :

Parses the specified string, which must be in the delimiter-separated values format with the appropriate delimiter, returning an array of objects representing the parsed rows.

So, you use d3.csvParse when you want to parse a string.

Here is a demo, suppose you have this string:

var data = "foo,bar,baz\n42,33,42\n12,76,54\n13,42,17";

If you want to parse it, you'll use d3.csvParse , not d3.csv :

 var data = "foo,bar,baz\n42,33,42\n12,76,54\n13,42,17"; var parsed = d3.csvParse(data); console.log(parsed);

 <script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

You can get csv data into d3 like the following -

// get the data
d3.csv("data.csv", function(error, data) {
  if (error) throw error;
      console.log(data);
      //format data if required...
      //draw chart
});

Answer 3

I also could not get the d3.csv("csv_file.csv", function(data) { //modifying code } to work.

A classmate recommended using the following, which has worked so far:

d3.csv("data.csv").then(function(data){
//modifying code
}

As noted in the comments below, this is a fix if you're running v5 instead of v4.

Answer 4

Use d3.csv("data.csv", function(data){...}) to get CSV from url and parse, or use d3.csv.parse() to parse a CSV-formatted string.

Answer 5

Here is the code you can use to read csv file using d3.js

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
 d3.csv("csv/cars.csv", function(data) {
 console.log(data[0]);
});
</script>

Note that, the csv file name is "cars.csv", and the file is saved in a folder called csv.

console.log(data[0])

will help you to see the data output in the browser debug window. Where, you can also find if there is any error as well.

Answer 6

Inside csv function, if i give the location of the csv file, it is not able to find read it. It assumes http://localhost:3001/data.csv; instead of local directory address