我正在学习如何使用 d3。我在尝试检索 .cvs/excel 文件时遇到问题。在第 13 行，我得到控制台读数“4 Nan”或“4 undefined, undefined”。我的 books.csv 位置可能有误。它与我的 html 文件和 d3.js 位于“xampp\htdocs\books.csv”中。行和列是 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 是 header 。
话虽这么说，这里是另一种 CSV:
x,y
4, 2
5, 10
3, 2
1, 7
0, 11
现在，x 和 y 是 header 。
我创建了一个 plunker 来向您展示区别:https://plnkr.co/edit/OipJg11P3aEvwgQ35xbh?p=preview
您的 CSV 是“wrongData.csv”，我的是“rightData.csv”。检查控制台。
关于javascript - csv 文件的 d3 检索在 javascript 控制台中返回 Nan，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38215161/