Question

我正在学习如何使用d3。我在尝试检索.cvs / excel文件时遇到问题。在第13行，我得到一个控制台读取＆＃34; 4 Nan＆＃34;或＆＃34; 4 undefined，undefined＆＃34;。我可能将books.csv的位置放在错误的位置。它位于＆＃34; xampp \ htdocs \ books.csv＆＃34;以及我的html文件和d3.js ..行和列是5 * 2.非常感谢任何问题或帮助！

<!DOCTYPE html>
<html>
 <head>
  <meta charset"utf-8">
   <title> D3 example</title>
   <script src="https://d3js.org/d3.v4.min.js"></script>
 </head>
 <body>

  <script>
        d3.csv("books.csv", function(myArrayOfObjects){
        myArrayOfObjects.forEach(function(d){
            console.log( d.x + ", " + d.y);
        });
    });
 </script>
  </body>
    <body>
        Is it Working?
    </body>
</html>

books.csv file contains: 
4, 2
5, 10
3, 2
1, 7
0, 11

Answer 1

问题只在于CSV的结构：

CSV的第一行是标题。 d3.csv使用该行创建对象。因此，在给定的CSV中：

foo, bar
42, 12

d3.csv将创建此数据：

[{"foo": 42, "bar": 12}]

目前，您的CSV会将数字作为标题，这对d.x和d.y无效。 Javascript允许您将对象键命名为数字（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types），但在这种情况下，您必须使用括号表示法引用它：

console.log( d["4"] + ", " + d["2"]);

4和2是标题。

话虽如此，这是另一种CSV：

x,y
4, 2
5, 10
3, 2
1, 7
0, 11

现在，x和y是标题。

我创建了一个向您展示差异的plunker：https://plnkr.co/edit/OipJg11P3aEvwgQ35xbh?p=preview

您的CSV是“wrongData.csv”，我的是“rightData.csv”。检查控制台。

Answer 2

注意：虽然我建议您在CSV文件中添加列标题，但如果您不愿意或不愿意这样做，请继续阅读。

您可以通过使用dsv.parseRows更改d3.csv的默认解析功能来解析不包含标头的CSV文件。

与dsv.parse不同，此方法将标题行视为标准行，并且应在DSV内容不包含标题时使用。

您可以按照d3.csv上的文档执行此操作，特别是

可以通过在返回的实例上调用request.row来更改行转换功能。

我使用以下内容分叉了接受的答案：

d3.request("wrongData.csv") .mimeType("text/csv") .response(xhr => d3.csvParseRows(xhr.responseText, d => d)) .get(data => console.log(data));

编辑：这是一名工作人员https://plnkr.co/edit/hD8NiyIpIM8MEummDVxG?p=preview

Answer 3

我遇到了同样的问题，我的csv文件看起来像这样：

Name,Value 
Dan, 31
Matt, 33
Mike, 29

要修复NAN问题，我必须用引号包装字符串：

"Name", "Value"
"Dan", 31
"Matt", 33
"Mike", 29

这解决了我的问题。

d3检索csv文件在javascript控制台

3 个答案: