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

标签 javascript d3.js promise

我知道 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/

相关文章:

javascript - 在 TinyMce 中保持嵌入视频的正确大小

javascript - 如何在特定时间和日期运行功能?

javascript - 如何使用 D3.js 实现 R 核密度估计图?

javascript - D3 事件 - 如何允许在 d3 元素中单击按钮?

javascript - jQuery 顺序调用多个 setTimeout()

javascript - 使用 Promise.all 返回总体结果并将其传递给另一个函数

Javascript Simon Game,如何检查答案

javascript - 如何使用 jQuery.getJSON() 读取远程 JSON 文件?

d3.js - D3 时间格式化语言环境

javascript - 单击每个第一个子 radio (未定义子长度)