使用d3.js从.csv文件导入数据

Question

我正在尝试使用d3.js从.csv文件中导入一些数据。我遇到了困难，想知道是否有人可以帮个忙。我的.csv文件的格式如下：

max_i,min_i,max_f,min_f
-122.1430195,-122.1430195,-122.415278,37.778643
-122.1430195,-122.1430195,-122.40815,37.785034
-122.4194155,-122.4194155,-122.4330827,37.7851673
-122.4194155,-122.4194155,-122.4330827,37.7851673
-118.4911912,-118.4911912,-118.3672828,33.9164666
-121.8374777,-121.8374777,-121.8498415,39.7241178
-115.172816,-115.172816,-115.078011,36.1586877
-82.5618186,-82.5618186,-79.2274115,37.9308282
-79.9958864,-79.9958864,-80.260396,40.1787544
-74.1243063,-74.1243063,-74.040948,40.729688
-106.609991,-106.609991,-106.015897,35.640949

我正在尝试使用以下代码加载数据：

var dataset = []
d3.csv("data.csv", function(data) {
   dataset = data.map(function(d) { return [ +d["max_i"], +d["min_i"] ]; });
});
console.log(dataset)

然而，我在控制台中只得到一个空的[]。有人能指出我的错误吗？

- araspion

Answer 1

更改为：

var dataset = []
d3.csv("data.csv", function(data) {
   dataset = data.map(function(d) { return [ +d["max_i"], +d["min_i"] ]; });
   console.log(dataset)
});

一旦数据返回，您需要在回调函数内检查数据集。

- Andy Thornton

---

谢谢 - 问题是我现在得到了一个新的错误。这就是控制台打印出来的内容。未捕获的类型错误：无法调用未定义的'map'方法 example.html:63 （匿名函数）example.html:63 （匿名函数）d3.v2.min.js:1 r d3.v2.min.js:2 r.onreadystatechange - araspion

我编辑了我的回答，我应该注意。由于您正在使用v2，因此没有错误参数。 - Andy Thornton

谢谢 - 我想我对这里的作用域有点困惑。为什么我需要在回调函数内部检查数据集，即使我将数据分配给在d3.csv()函数外定义的全局变量？ - araspion

因为回调函数是异步执行的，只有在返回数据后才会执行。这意味着如果你将console.log(dataset)放在回调函数之外，你将得到一个空数组，因为还没有返回数据。如果这回答了你的问题，你应该标记它。以帮助其他遇到同样问题的人 :) - Andy Thornton

谢谢！非常有帮助。我想我误以为回调函数中发生的所有事情都会与脚本的其余部分“并行”发生，因此它可能会返回一个不完整的对象...但它实际上是在脚本的末尾执行csv操作吗？无论如何，这解决了问题。 - araspion

除了说一旦CSV数据返回它就会执行CSV操作外，真的无法精确地预测何时会执行CSV操作。试着这样看待它，回调是作为参数传递给另一个函数d3.csv()的函数。您没有立即执行此函数，因为您没有调用它，即function(data) {}()。 它在返回数据时被调用。当您将一个函数作为参数传递时，您基本上是告诉CSV函数：“嘿，在获取数据后执行此函数，我将继续我的脚本。”希望这有所帮助。 - Andy Thornton