csv到d3.js中的数组

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
}