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 
} 

Answer 2

你可以声明一个变量回调函数外，然后用来自CSV的值赋给它：

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

，然后使用csv_data回调

Answer 3

我认为你的问题是时机，因为它是一个异步调用。因此，像你一样加载数据，但在d3代码中调用函数（其中Mike有'doSomethingWithRows（）'）。不要跟随你的d3代码进行任何更多的处理（其中Mike有'second（）'），将代码移动到'doSomethingWithRows（）'函数中。它将有数据可用，你走了...

Answer 4

我认为问题已经解决，但我面临类似的问题，上述讨论没有那么有用。所以发布我如何找到解决这个问题的方法：在这里，data[0]未定义的原因可能是因为数据本身不被浏览器读取。这种读取失败可能是由于直接加载数据（csv）文件，即使用以下命令d3.csv("myCSVfile.csv",....)。这种方法可能无法正常工作，因为Web应用程序通常需要从Web服务器加载文件（不确定为什么会出现这种情况）。因此需要安装本地网络服务器。使用此论坛来了解如何：How do I setup a local HTTP server using Python。如果您使用Python 3创建本地Web服务器，则更新的代码将为：d3.csv("http://localhost:8000/myCSVfile.csv",.....)。