Javascript 如何使用 d3 v4 读取 CSV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42285441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to read in CSV with d3 v4?
提问by ocean800
I'm just having a little trouble understanding the documentation for CSV Parsewith D3. I currently have:
我在理解带有 D3 的CSV Parse的文档时遇到了一些麻烦。我目前有：
d3.parse("data.csv",function(data){
salesData = data;
});
But I keep on getting the error:
但我不断收到错误消息：
Uncaught TypeError: d3.parse is not a function
未捕获的类型错误：d3.parse 不是函数
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!!
为什么会这样？任何帮助将不胜感激，谢谢！！
回答by Gerardo Furtado
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.csvParse，它解析一个字符串（并且还混合了 D3 v3 语法和 D3 v4 语法）。这是区别：
d3.csv (D3 v4)
d3.csv (D3 v4)
The d3.csvfunction, which takes as arguments (url[[, row], callback]):
该d3.csv功能，这需要作为参数(url[[, row], callback])：
Returns a new request for the CSV fileat the specified urlwith the default mime type text/csv. (emphasis mine)
使用默认的 mime 类型 text/csv在指定的url处返回对 CSV文件的新请求。（强调我的）
So, as you can see, you use d3.csvwhen you want to request a given CSV file at a given url.
因此，如您所见，d3.csv当您想要在给定 url 处请求给定 CSV 文件时使用。
For example, the snippet below gets the CSV at the url between quotes, which looks like this...
例如，下面的代码段在引号之间的 url 处获取 CSV，如下所示...
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:
...并记录解析的 CSV 文件，检查它：
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
d3.csvParse
On the other hand, d3.csvParse(or d3.csv.parsein D3 v3), which takes as arguments (string[, row]):
另一方面，d3.csvParse（或d3.csv.parse在 D3 v3 中），它作为参数(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.csvParsewhen you want to parse a string.
所以，d3.csvParse当你想解析一个字符串时使用。
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:
如果你想解析它，你将使用d3.csvParse，而不是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>回答by sparta93
You can get csv data into d3 like the following -
您可以将 csv 数据放入 d3 中，如下所示 -
// get the data
d3.csv("data.csv", function(error, data) {
if (error) throw error;
console.log(data);
//format data if required...
//draw chart
});
回答by surfthecity
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.
用于d3.csv("data.csv", function(data){...})从 url 获取 CSV 并解析，或用于d3.csv.parse()解析 CSV 格式的字符串。
回答by Amir Md Amiruzzaman
Here is the code you can use to read csv file using d3.js
这是您可以使用 d3.js 读取 csv 文件的代码
<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.
请注意，csv 文件名为“cars.csv”，该文件保存在名为 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.
将帮助您在浏览器调试窗口中查看数据输出。在哪里，您还可以查找是否有任何错误。
回答by Heather Claxton
I also could not get the d3.csv("csv_file.csv", function(data) { //modifying code } to work.
我也无法让 d3.csv("csv_file.csv", function(data) { //modifying code } 工作。
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.
正如下面的评论中所指出的，如果您运行的是 v5 而不是 v4，这是一个修复。
