如何在 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.json 和 d3.csv，此外，也就是说，您的 d3.csv 需要行转换函数。

因此，这就是您可以做的。首先，设置一个包含相应 URL 的数组。数组中元素的顺序很重要，因为我将使用索引来设置正确的方法（因此，如果您有更多 URL，您将需要一种更具可扩展性的方式来从 CSV 中判断 JSON） .

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

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

const popByName = d3.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
});

PS：与问题无关，但值得一提的是d3.map即将被弃用。因此，如果您打算升级到未来的 D3 版本，请改用 vanilla JavaScript new Map()。

如何在 d3 中使用 Promise.all 而不是队列

how to use Promise.all instead of queue in d3

javascript

promise

d3.js

es6-promise