gpt4 book ai didi

javascript - 将 d3.queue 与 D3 v5 一起使用

转载 作者:行者123 更新时间:2023-12-01 16:16:58 25 4
gpt4 key购买 nike

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

d3.queue is not a function

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

<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 不是函数 错误。当您引用迷你库时,错误显然消失了。

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

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 etc 没有回调作为第二个(最后一个)参数。相反,它们返回一个 promise (使用 Fetch API)。

也就是说,上面的代码片段不仅丑陋而且完全没有必要:只需删除 d3.queue

关于javascript - 将 d3.queue 与 D3 v5 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62941644/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com