Using d3.queue with D3 v5



我知道在D3版本5中,d3.queue()已经被Promise取代,事实上,如果我尝试使用我得到的函数:

d3.队列不是函数

但我不明白为什么如果我把它放在html头中,我就不会再收到上面的错误,但代码似乎不起作用:

<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
</head>

TL;DR:您根本不需要D3 v5中的d3.queue,因为它在内部使用Fetch API。因此,您可以只使用Promise.all()或链接then()方法。


正如您可能知道的,d3.queue用于D3 v4,而不是D3 v5。由于D3 v5中没有queue方法,因此,正如预期的那样,仅尝试d3.queue就会导致d3.queue is not a function错误。当您引用迷你库时,错误显然会消失。

值得一提的是,如果与D3 v5一起使用,d3.queue将工作,这不是问题:

d3.queue()
.defer(function foo(callback) {
setTimeout(function() {
callback(null, "finished");
}, 100);
})
.await(function(error, message) {
console.log(message);
});
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>

然而,无论出于何种原因,如果您仍然希望将d3.queue与D3 v5一起用于获取文件,则必须将适当的函数传递给defer,并进行如下回调(这里我使用的是我在网上创建的一个简单的JSON,它只是{foo: 42}(:

d3.queue()
.defer(function foo(url, callback) {
d3.json(url).then(function(file) {
callback(null, file)
})
}, "https://api.npoint.io/5b22a0474c99d3049d2e")
.await(function(error, message) {
console.log(message);
});
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>

原因是,与D3 v4或更低版本不同,在D3 v5中,像d3.csvd3.jsond3.tsv等方法没有回调作为第二个(最后一个(参数。相反,它们返回一个promise(使用Fetch API(。

话虽如此,上面的片段不仅丑陋,而且完全没有必要:只需删除d3.queue即可。

最新更新