csv 文件的 d3 检索在 JavaScript 控制台中返回 Nan

我只是在学习如何使用d3。我在尝试检索 .cvs/excel 文件时遇到问题。在第 13 行，我得到"4 Nan"或"4 未定义，未定义"的控制台读数。我可能把书的位置.csv放在错误的位置。它位于"xampp\htdocs\books.csv"以及我的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

问题只是你的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"。检查控制台。

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

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

与 dsv.parse 不同，此方法将标题行视为标准行，只要 DSV 内容不包含标题，就应使用此方法。

您可以通过遵循 d3.csv 上的文档来执行此操作，特别是

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

我使用以下方法分叉了接受答案的 plunker：

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

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

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

为了解决 NAN 问题，我必须用引号包装字符串：

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

这解决了我的问题。

相关内容

最新更新

热门标签：