如何在 d3 中使用 Promise.all 代替队列

Question

var popByName = d3.map();
queue()
.defer(d3.json, "municipalities-topo-simple.json")
.defer(d3.csv, "population-edited.csv", function(d) {
    popByName.set(d.name, +d.population);
})
.await(ready);

我在 D3 v3 中使用此代码，但在 d3 v5 中queue已弃用。

我如何更改此代码以供使用Promise.all？

Answer 1

乍一看，您的问题似乎与此问题重复，但事实并非如此，原因有两个：您混合了d3.jsonand d3.csv，除此之外，您d3.csv还需要一个行转换函数。

因此，您可以这样做：首先，创建一个包含相应 URL 的数组。数组中元素的顺序很重要，因为在这个答案中，我将使用索引来选择正确的方法（因此，如果您有更多 URL，则需要一种更具可扩展性的方法来区分 JSON 和 CSV）。

const files = ["municipalities-topo-simple.json", "population-edited.csv"];

然后，我们设置行转换函数：

const popByName = new Map();
function row(d) {
    popByName.set(d.name, +d.population);
};

最后，我们将承诺推送到一个数组，我们将使用它Promise.all：

const promises = [];

files.forEach(function(url, index) {
    promises.push(index ? d3.csv(url, row) : d3.json(url))
});

Promise.all(promises).then(function(data) {
    console.log(data); //check if all data was loaded
    //any code that depends on 'data' goes here
});