CODEWITHSUNDEEP
javascriptd3.jspromise
stackfac
stackfac

Reputation: 57

Using d3.queue with D3 v5

I know that d3.queue() has been replaced with Promise in D3 version 5, indeed if I try to use the function I get:

d3.queue is not a function

But I don't understanding why if I put this in the html header I don't get the above error anymore, but the code seems not working:

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

Upvotes: 3

Views: 1761

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102198

TL;DR: You simply don't need d3.queue in D3 v5 because it uses the Fetch API internally. Therefore, you can just use things like Promise.all() or chaining the then() methods.

As you probably know, d3.queue was meant to be used with D3 v4, not D3 v5. Since there is no queue method in D3 v5, just trying d3.queue will, as expected, result in the d3.queue is not a function error. When you reference the mini-library, the error obviously goes away.

It's worth mentioning that d3.queue will work if used with D3 v5, that's not an issue:

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>

However, if for whatever reason you still want to use d3.queue with D3 v5 for fetching files, you have to pass the adequate function to defer, with the callback like this (here I'm using a simple JSON I created online, which is just {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>

The reason is that, unlike D3 v4 or lower, in D3 v5 methods like d3.csv, d3.json, d3.tsv etc do not have a callback as the second (last) argument. Instead of that, they return a promise (using the Fetch API).

That being said, the snippet above is not only ugly but completely unnecessary: just drop d3.queue.

Upvotes: 2

Related Questions