Adapt old geo to D3 v5, how to express a queue of Promise?

Question

I am adapting an old version D3 map visualization to modern D3v5: first step, to D3v4, is running with this source, but to the final step I need to convert Promises, from old queue,

d3.queue().defer(d3.json,"file.json").(ready);

to the modern v5 style... How to express in v5 style?
Seems that is something as

var brMap = d3.json("file.json");
Promise.all([brMap]).then(ready)

but is not working.

PS: where the v5 simple examples?

This should work, have a look at [my answer here](https://stackoverflow.com/a/49534634/5768908). What exactly is the problem? — Gerardo Furtado, Oct 28 '19 at 09:55
Hi @GerardoFurtado, thanks. Perhaps that clues solve my problem... I have syntax/structure problems only. I will test as soon as possible, and back to say — Peter Krauss, Oct 28 '19 at 10:13
@PeterKrauss Since you have only one task—namely `d3.json—`to wait for, your code can be simplified even more to `d3.json("file.json").then(ready)`; there is no need to use `Promise.all()` in this simple case. — altocumulus, Oct 28 '19 at 10:18
@PeterKrauss Apart from the above mentioned simplifications I suspect you are still using the callback function's old signature from the example: `function ready(error, shp)`, am I right? Note, that the signature of [`.then()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) slightly differs from the Node.js callback style `function(error, data)` used by previous versions of D3... — altocumulus, Oct 28 '19 at 10:26
@PeterKrauss ...Now, that there is no `error` parameter anymore this would store the loaded data in the first parameter (now misleadingly mis-named `error`) leaving the second parameter `shp` as `undefined` all the time. You might want to have a look at an [answer](https://stackoverflow.com/a/53704123/4235784) of mine explaining how to deal with this in a more detailed way. — altocumulus, Oct 28 '19 at 10:27

score 0 · Answer 1 · answered Oct 28 '19 at 14:20

Thanks @GerardoFurtado and @altocumulus, the answer was on his comments, here merging all.

There are some globals (perhaps not a best practice)

var g;

In "after page load" context run

svg = d3.select("etc..")
g = svg.append("g")
// ...
d3.json("file.json").then(ready);

where the function ready() is something as

function ready(shp) {
  var data1 = topojson.feature(shp, shp.item1);
  //... draw map appenging features to global g
}

See the final result of the solution here.

1 Answers1