如何使用 d3 v4 读取 CSV 文件? [英] How to read in CSV with d3 v4?

问题描述

我在理解 的文档时遇到了一些麻烦使用 D3 进行 CSV 解析.我目前有:

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; 
});

但我不断收到错误:

未捕获的类型错误:d3.parse 不是函数

Uncaught TypeError: d3.parse is not a function

这应该是什么样子的?我只是有点困惑，我能找到的唯一例子是this.

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.

我也尝试过:

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

并得到:

未捕获的类型错误:无法读取未定义的属性解析"

Uncaught TypeError: Cannot read property 'parse' of undefined

为什么会这样?任何帮助将不胜感激，谢谢！！

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

推荐答案

这里有一些误解:你混淆了 d3.csv，这是一个请求，和 d3.csvParse，它解析一个字符串(并且还混合了 D3 v3 语法和 D3 v4 语法).这就是区别:

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 函数，它需要作为参数 (url[[, row], callback]):

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

在指定的 url 处返回对 CSV 文件 的新请求，默认 MIME 类型为 text/csv.(强调我的)

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

因此，如您所见，当您想在给定网址请求给定 CSV 文件时，您可以使用 d3.csv.

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

例如，下面的代码段在引号之间的 url 处获取 CSV，如下所示...

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

... 并记录解析的 CSV 文件，检查它:

... 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(或 D3 v3 中的 d3.csv.parse)，它作为参数 (string[, row]):

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.

所以，当你想解析一个字符串时，你使用 d3.csvParse.

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
42,33,42
12,76,54
13,42,17";

如果你想解析它，你将使用d3.csvParse，而不是d3.csv:

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

var data = "foo,bar,baz
42,33,42
12,76,54
13,42,17";

var parsed = d3.csvParse(data);

console.log(parsed);

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

这篇关于如何使用 d3 v4 读取 CSV 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！