将JSON数据读入正确的数据结构

Question

我正在尝试使用d3加载JSON数据。我试图生成的数据结构是：

var dataset = [[{"x": 10.2, "y": 120.1}, {"x": 20.2, "y": 20.1},{"x": 30.2, "y": 10.2}, {"x": 40.2, "y": 20.2}]]

我使用的D3 / JS代码如下所示：

var dataset = [[]];
d3.json("/data", function (error, data) {

    for (var i=0;i<data.length;i++) {
        dataset[0].push({"x": data[i].x, "y": data[i].y});
    }
});

当我在控制台中查看结果时，我试图生成的数据结构如下所示：

dataset = [Array[4]]
dataset[0] = [Object, Object, Object, Object]

我使用上面的D3函数生成的数据结构如下所示：

dataset = [Array[0]]

当我在回叫开始时记录数据时，我得到了这个：

我可以通过console.log(data[0].y);访问数据，这给了我120.1

如何生成将JSON数据读入正确数据结构的函数？

Answer 1

您遇到的问题是d3.json()是异步的（默认情况下为jQuery.ajax()）。

这意味着当您收到数据时，将填充dataset变量。因此，如果您尝试使用dataset而不等待接收数据，则会有一个空的dataset。

解决方案是在回调中使用此dataset执行所有操作，这将在成功或错误时调用。例如，如果您需要在代码中调用函数useDataset()，则可以执行以下操作：

var dataset;
d3.json("/data", function (error, data) {
    // insert checking for error
    dataset = data;
    useDataset()
});

如果您想了解有关异步请求和回调的更多信息，jQuery.ajax() documentation非常棒。

顺便说一句，通过这样做，您可以删除用于复制数据的整个功能。