[英]d3 retrieval of a csv file returns Nan in the javascript console
我只是在學習如何使用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文件具有數字作為標題，而dx和dy根本無法使用。 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是標題。
我創建了一個插件給您看區別： https ://plnkr.co/edit/OipJg11P3aEvwgQ35xbh?p=preview
您的CSV是“ wrongData.csv”，而我的是“ rightData.csv”。 檢查控制台。
注意 ：雖然我建議您確實將列標題添加到CSV文件中，但是如果您不願意或不能這樣做，請繼續閱讀。
通過使用dsv .parseRows更改d3.csv的默認解析功能， 可以解析不包含標題的CSV文件。
與dsv.parse不同，此方法將標題行視為標准行，並且應在DSV內容不包含標題時使用。
可以通過在返回的實例上調用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
我遇到了同樣的問題，我的csv文件如下所示：
Name,Value
Dan, 31
Matt, 33
Mike, 29
要解決NAN問題，我必須用引號將字符串包裝起來：
"Name", "Value"
"Dan", 31
"Matt", 33
"Mike", 29
這解決了我的問題。
（帶有D3的Javascript）來自CSV文件的數據僅使用一次，並且第二次返回undefined或NaN
[英](Javascript with D3) Data from CSV file only being used once and returning undefined or NaN second time
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.