用 d3.csv 解析 csv

Question

我正在嘗試削減一個 csv 文件，我在 js 中嘗試了幾種方法但沒有成功。 我在編碼方面很新，被困在這里。

這是我的第一次嘗試。 我收到錯誤消息“Uncaught TypeError: d3.csv(...).then is not a function”

d3.csv("/data/testfile.csv").then(function(data) {
  console.log(data[0]);
});

我也試過這段代碼。 bfile 的警報向我顯示了正確的值，但我仍然需要解析它....

var file = document.getElementById("file input").files[0];
var reader = new FileReader();
reader.onload = function(e) {  
  bfile = e.target.result 
  alert(bfile);   // this shows bfile

  }
  reader.readAsText(file);
};

第三次嘗試。 它在這里抱怨並說“ then is not a function”。

d3.csv("/data/cities.csv").then(function(data) {
  data.forEach(function(d) {
    d.population = +d.population;
    d["land area"] = +d["land area"];
  });
  console.log(data[0]);
});

這是我想在 csv 結束后實現的目標：

=> {city: "seattle", state: "WA", population: 652405, land area: 83.9}

有什么想法可以解決這個問題嗎？

Answer 1

問題

您使用的 D3 版本似乎不支持 JavaScript 的Promises 。 參見類似問題： Uncaught TypeError: d3.csv(...).then is not a function

這是在版本 5 之前的 D3 中調用 function 的方式：

d3.csv("file.csv", function(error, data) {
  if (error) throw error;
  console.log(data);
});

它使用異步回調來加載數據（如上面的function(error, data)參數）。 另請參閱D3 v3 文檔中的示例。

由於 D3版本 5引入了現代Promises而不是異步回調，因此調用變為：

d3.csv("file.csv").then(function(data) {
  console.log(data);
});

請參閱有關v5 中重大更改的發布頁面：

就像BallpointPen 評論的那樣：

僅在 v5 中 d3.csv 返回 Promise， then() function 需要它

解決方案

來自預期的 output：

{city: "seattle", state: "WA", population: 652405, land area: 83.9}

我們可以假設您的 CSV 看起來像：

city, state, population, land area
"seattle", "WA", 652405, 83.9

我們需要 CSV 輸入示例來重現。

D3

對於舊版本的 D3（如 v3）：

d3.csv("/data/testfile.csv", function(error, data) {
  if (error) throw error;
  console.log(data);
});

使用較新版本的 D3（如 v5）：

d3.csv("/data/testfile.csv").then(function(data) {
  console.log(data[0]);
});

替代 CSV 解析器

為什么不使用自稱是的Papa Parse ：

強大的瀏覽器內置 CSV 大男孩和女孩解析器

用法示例：

var csv = 'city, state, population, land area\n"seattle", "WA", 652405, 83.9';

var results = Papa.parse(csv, {
    header: true  // Key data by field name instead of index/position
});

Output（從控制台復制）：

{
  data: [
    {city: "seattle", state: "WA", population: " 652405", "land area": " 83.9"}
  ],
  errors: [],
  meta: {aborted: false, cursor: 64, delimiter: ",", fields: ["city", " state", " population", " land area"], linebreak: "↵", truncated: false}
}

或將沒有標題行的情況解析為簡單數組：

{
  data: [
    ["city", " state", " population", " land area"],
    ["seattle", " "WA"", " 652405", " 83.9"]
  ],
  errors: [],
  meta: {delimiter: ",", linebreak: "↵", aborted: false, truncated: false, cursor: 64}
}

它有一個演示頁面可以在線嘗試 CSV 解析。