javascript - 如果我从外部数据加载，如何更新 d3 图形？

Question

所以我一直找不到例子。我正在使用 D3 从外部文件加载这个巨大的数据集，并使用部分数据制作一些图表。当 slider 移动时，我希望与数据的其他部分制作相同的图表。

我使用 d3.json() 来加载数据。我面临的问题是:由于 d3.json() 是异步的，它只加载一次数据集，然后我无法从其他函数访问它。我无法使用另一个更新函数来生成新图表，因为我根本无法再访问数据。

其他人的建议是“仅使用 d3.json() 函数中的数据:How to store a JSON object loaded from a file?

d3.json("temp.json", function(data){
    //use data here
})
// do not use data anymore

我尝试使用变量来存储数据(上面同一问题链接的第二个答案):

var DATASET; // global

d3.json("file.json", function(data) {
    DATASET = data;
    //any other functions that depend on data
});

d3.selectAll().data(DATASET).......

我根本无法让它工作，因为(我认为这就是原因)当 d3.data 的最后一行调用 DATASET 时，数据尚未加载到 DATASET

有什么方法可以更新 d3 中的外部数据吗？我应该在更新函数中再次加载数据吗？由于数据集很大，会影响性能吗？

非常感谢您的回答!

Answer 1

如果您想一次读取所有数据，您应该将其存储在全局 DATASET 变量中，就像您在代码片段中显示的那样。但是，不要将更新逻辑放在主脚本流中，而是将其放入 update(...) 函数中，并从 d3.json 回调中调用它...类似这样的 (未经测试):

var DATASET; // global

d3.json("file.json", function(data) {
    // data is loaded, save the full set
    DATASET = data;
    // filter the initial subset
    var subdata = data.filter(...);
    // now update the graph
    updateGraph(subdata);
});

function updateGraph(data) {
    // when invoked without any data, use the full dataset
    var newdata = (data == null ? DATASET : data);

    // data rendering logic starts here...
    d3.selectAll().data(newdata);
  ...
}

这会将完整数据集保存在全局变量中，使用经过过滤的数据子集绘制初始图表，并且还允许您在再次调用该函数之前使用不同的过滤器更改显示的数据。