javascript - 这种加载外部csv数据的方法有什么问题吗？

Question

我是 d3 新手。我正在尝试加载外部 csv 数据。我有这个代码

var data = d3.csvParseRows("https://github.com/josh-flori/inner_state_viz/blob/master/inner_state_data.csv", function(d, i) {
   return {
      xx: +d[0],
      yy: +d[1],
      radius: +d[2],
      t: d[3],

   };
});

但是当将数据打印到控制台时，它显示为

[[object Object] {
  radius: NaN,
  t: undefined,
  xx: NaN,
  yy: NaN
}]

也许我只是真的很累，但我已经在网上浏览了一个小时，完全无法弄清楚我做错了什么。有什么想法吗？

谢谢

Answer 1

我不清楚您为什么使用d3.csvParseRows。根据文档，d3.csvParseRows...

Parses the specified string, which must be in the delimiter-separated values format with the appropriate delimiter, returning an array of arrays representing the parsed rows. Unlike dsv.parse, this method treats the header line as a standard row, and should be used whenever DSV content does not contain a header. (emphasis mine).

另一方面，您的 CSV 显然包含标题:

xx,yy,radius,t
151,440,8,asdgasdg
270,178,2,asdgg
198,401,7,gg
394,317,7,gg
466,429,10,ggdsdd

最重要的是，这里是一个正确的 CSV，而不是字符串。

话虽这么说，请改用d3.csv。请注意，与 d3.csvParseRows 不同，d3.csv 返回一个 Promise。最后，考虑到 CSV header ，您的示例中不需要该行转换函数。

这是演示:

d3.csv("https://raw.githubusercontent.com/josh-flori/inner_state_viz/master/inner_state_data.csv").then(function(data) {
  console.log(data)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>