如何用d3 v4读取CSV？

Question

我只是在理解使用D3的CSV Parse文档时遇到一些麻烦.我目前有:

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

但我继续得到错误:

未捕获的TypeError:d3.parse不是函数

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

我也试过类似的东西:

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

得到了:

未捕获的TypeError:无法读取未定义的属性'parse'

为什么会这样？任何帮助都会有很大的帮助,谢谢!!

Answer 1

这里有一些误解:你很困惑d3.csv,这是一个请求d3.csvParse,用来解析一个字符串(并且还将D3 v3函数与D3 v4函数混合在一起).这是不同的:

d3.csv(D3 v4)

该d3.csv功能,这需要作为参数(url[[, row], callback]):

使用默认的mime类型text/csv 在指定的url处返回CSV 文件的新请求.(强调我的)

因此,正如您所看到的,d3.csv当您想要在给定URL处请求给定的CSV文件时,您可以使用它.

例如,下面的代码段会在引号之间的网址中获取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

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

解析指定的字符串,该字符串必须采用带有相应分隔符的分隔符分隔值格式,并返回表示已解析行的对象数组.

因此,您d3.csvParse在要解析字符串时使用.

这是一个演示,假设你有这个字符串:

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

如果你想解析它,你将使用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>