d3.csv（D3 v4）

Question

我在使用D3了解CSV Parse的文档时遇到了一些麻烦。我目前有：

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

但我一直在收到错误：

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

这应该是什么样的？我只是有点困惑，我能找到的唯一例子就像this。

我也尝试过这样的事情：

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 文件的新请求。（强调我的）

因此，正如您所看到的，当您想要在给定网址上请求给定的CSV文件时，可以使用d3.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文件，检查它：

＆＃13;

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

＆＃13;

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

＆＃13;

d3.csvParse

另一方面，d3.csvParse（或D3 v3中的d3.csv.parse），其作为参数(string[, row])：

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

因此，当您想要解析字符串时，可以使用d3.csvParse。

这是一个演示，假设你有这个字符串：

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

如果您要解析它，您将使用d3.csvParse，而不是d3.csv：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以将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
}

Answer 3

使用d3.csv("data.csv", function(data){...})从网址获取CSV并进行解析，或使用d3.csv.parse()解析CSV格式的字符串。

Answer 4

以下是您可以使用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>

请注意，csv文件名为“cars.csv”，文件保存在名为csv的文件夹中。

console.log(data[0])

将帮助您在浏览器调试窗口中查看数据输出。在哪里，你也可以找到是否有任何错误。

Answer 5

我也无法获得d3.csv（“ csv_file.csv”，function（data）{//修改代码} 工作。

同学建议使用到目前为止有效的以下内容：

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

如下面的注释所述，如果您运行的是v5而不是v4，则此修复程序可以解决。

如何使用d3 v4以CSV格式阅读？

5 个答案:

d3.csv（D3 v4）

d3.csvParse