将 d3.queue 与 D3 v5 一起使用答案

【问题标题】：Using d3.queue with D3 v5将 d3.queue 与 D3 v5 一起使用
【发布时间】：2020-07-17 21:34:16
【问题描述】：

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

d3.queue 不是函数

但我不明白为什么如果我把它放在 html 标头中我不会再收到上述错误，但代码似乎不起作用：

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

【问题讨论】：

标签： javascript d3.js promise

【解决方案1】：

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.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.csv、d3.json、d3.tsv 等没有回调作为第二个（最后一个）参数。取而代之的是，它们返回一个承诺（使用 Fetch API）。

话虽如此，上面的 sn-p 不仅丑陋而且完全没有必要：只需删除d3.queue。

【讨论】：

谢谢，成功了！现在我想用 Promise 替换这段代码。我已经阅读了你的两个答案，但我无法解决。如果你愿意，你可以在这里帮助我link