如何使用 d3 v4 读取 CSV？

Posted 2023-02-22

【中文标题】如何使用 d3 v4 读取 CSV？

【英文标题】：How to read in CSV with d3 v4?

【发布时间】：2017-07-06 05:49:17

【问题描述】：

我只是在理解 CSV Parse 与 D3 的文档时遇到了一点麻烦。我目前有：

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

但我不断收到错误：

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

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

我也尝试过类似的东西：

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

得到：

未捕获的类型错误：无法读取未定义的属性“解析”

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

【问题讨论】：

由于 D3 v5 中的方法名称相同但签名不同，所以我在问题的标题中添加了 "v4"，以使将来的读者清楚并避免不必要的错误：此 Q/A不适用于 v5。

【参考方案1】：

使用d3.csv("data.csv", function(data)...)从url获取CSV并解析，或者使用d3.csv.parse()解析CSV格式的字符串。

【参考方案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
);

【参考方案3】：

这里有一些误解：您将d3.csv（一个请求）与d3.csvParse（解析字符串）混淆了（并且还将D3 v3 语法与D3 v4 语法混合在一起）。这就是区别：

d3.csv (D3 v4)

d3.csv 函数，它以 (url[[, row], callback]) 为参数：

返回对指定 url 处的 CSV file 的新请求，默认 mime 类型为 text/csv。 （强调我的）

因此，如您所见，当您想在给定 url 请求给定 CSV 文件时，您使用 d3.csv。

例如，下面的 sn-p 获取引号之间 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

...并记录解析后的 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 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：

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>

【讨论】：

似乎为 d3 v4 建议的上述语法现在在 v5 中发生了变化，上面不再返回数据对象，而是返回对象的每个元素

@tsando，确实，因为我已经回答了here。我刚刚编辑了标题以明确这一点。

【参考方案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])

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

【参考方案5】：

我也无法获取 d3.csv("csv_file.csv", function(data) //modifying code 上班。

一位同学推荐使用如下，目前有效：

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

如下面的 cmets 所述，如果您运行的是 v5 而不是 v4，这是一个修复。

【讨论】：

该问题明确要求 v4，而您的更改仅在使用 v5 时才需要。尽管您的答案对于最新版本是正确的，但它以某种方式错过了这个问题。我建议你考虑删除它。

@altocumulus 虽然这是真的，但我认为使用更高版本的人可能会偶然发现我的问题并可以使用这个答案。不过，当然，最好将它包含在 v5 中。感谢您的澄清。