javascript - 如何在 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

乍一看，您的问题似乎与 this one 重复，但情况并非如此，原因有二:您混合使用了 d3.json 和 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 推送到一个数组，我们将与 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
});