d3.js 中的 csv 到数组

Question

我使用它来解析 csv 文件并创建 d3 文档中指定的数组数据:

d3.csv("afile.csv", function(data) {
    data.forEach(function(d) {
    d.date = formatDate.parse(d.date);
    d.price = +d.price;
});

但是，如果在这个方法之后我尝试调用data[0]，它会说它是未定义的。这是因为 data 是一个引用，一旦 d3.csv() 超出范围就会被销毁吗？如果是这种情况我该如何克服这个问题。我需要引用 d3.csv()

中的数据

Answer 1

d3.csv 是一种异步方法。这意味着回调函数内部的代码在数据加载时运行，但回调函数之后和外部的代码将在请求发出后、数据尚不可用时立即运行。换句话说:

first();
d3.csv("path/to/file.csv", function(rows) {
  third();
});
second();

如果您想使用 d3.csv 加载的数据，您需要将该代码放入回调函数中(其中 third 位于上面):

d3.csv("path/to/file.csv", function(rows) {
  doSomethingWithRows(rows);
});

function doSomethingWithRows(rows) {
  // do something with rows
}

或者，您可以将其保存为窗口上的全局变量，以便稍后引用:

var rows;

d3.csv("path/to/file.csv", function(loadedRows) {
  rows = loadedRows;
  doSomethingWithRows();
});

function doSomethingWithRows() {
  // do something with rows
}

如果需要，您还可以将加载的数据显式分配给窗口对象，而不是声明一个变量然后管理两个不同的名称:

d3.csv("path/to/file.csv", function(rows) {
  window.rows = rows;
  doSomethingWithRows();
});

function doSomethingWithRows() {
  // do something with rows
}