如果我從外部數據加載，如何更新d3圖形？

Question

因此，我無法找到一個例子。 我正在使用D3從外部文件加載此龐大的數據集，並使用部分數據制作了一些圖形。 當滑塊移動時，希望與數據的其他部分制作相同的圖形。

我使用d3.json（）加載數據。 我面臨的問題是：由於d3.json（）是異步的，因此它將加載一次數據集，然后無法從其他函數訪問它。 我再也無法創建新圖了，因為我再也無法訪問數據了。

其他人的建議是“僅使用d3.json（）函數中的數據： 如何存儲從文件加載的JSON對象？

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);
  ...
}

這會將完整的數據集保存在全局變量中，繪制帶有已過濾數據子集的初始圖，並且還允許您在再次調用函數之前使用其他過濾器來更改顯示哪些數據。