时间戳

首页 > 解决方案 > 将 d3.queue 与 D3 v5 一起使用

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

问题描述

我知道它在 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>

标签： javascriptd3.jspromise

解决方案

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

正如您可能知道的那样，d3.queue它旨在与 D3 v4 一起使用，而不是与 D3 v5 一起使用。queue由于在 D3 v5中没有方法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 d3.queuev5 来获取文件，则必须将适当的函数传递给defer{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回调作为第二个（最后一个）参数。取而代之的是，它们返回一个承诺（使用 Fetch API）。d3.jsond3.tsv

话虽如此，上面的代码片段不仅丑陋而且完全没有必要：只需 drop d3.queue。

推荐阅读