Question

我认为这可能是一个简单的问题，如果这很愚蠢，请提前道歉。

我正在试图弄清楚如何从带有D3的.csv文件中读取数据。为什么我的变量“dataset”在函数内打印到控制台，但之后不再显示？

var dataset;

d3.text("https://googledrive.com/host/0B2OWv79OnxJSczZRaTF2N1BuaVE", function(datasetText) {

    var parsedData = d3.csv.parseRows(datasetText);
    dataset = parsedData;
    console.log(dataset);
});

console.log(dataset);

这是否意味着我必须在此d3.text（）块中编写所有相关代码？另外，在d3.text（）中放置代码实际上做了什么？

Answer 1

我要回答你先问的第三个问题。

在这个d3.text()中放置代码实际上做了什么？

d3.text可以传递一个可选的回调函数，根据the docs调用两个参数 - “错误，如果有的话，和响应文本” - 在文本文件之后是加载。因此，如果您要处理使用d3.text加载的文件，一种简单的方法是传递d3.text一个回调函数，该函数将为您执行处理（正如您在示例中所做的那样）。

回到第一个问题。

为什么我的变量“dataset”会在函数内打印到控制台，但之后不再显示？

dataset仅在传递给d3.text的回调函数中有值的原因是因为文本文件是异步加载的。这意味着程序流程不会停止并等待d3.text完成加载文本文件，但会继续执行。因此，dataset首先被记录为没有来自示例最后一行的值，并且稍后在加载后记录在d3.text回调函数中。

最后，你的第二个问题。



这是否意味着我必须在此d3.text()块中编写所有相关代码？


虽然您不必将所有相关代码放在传递给d3.text的回调中（例如，您可以使用jQuery's Promise），但这是编写D3代码（和Javascript代码）的常用方法一般来说）。使代码更清晰的一种方法是按如下方式组织它：

d3.text("file-name", createChart); function createChart(datasetText){ ... }

在这里，您要在与加载数据的位置不同的地方定义回调函数createChart，这有时会使您的代码更易于阅读和使用。

使用D3 js以CSV格式读取

1 个答案: