How to load two external files in D3?

Question

To load one TopoJson file in D3 (I'm using version 7), it's as simple as:

d3.json("file01.json").then(function(topology) {

To load two files in previous versions you could use for example in version 6:

Promise.all([
    d3.json("file01.json"),
    d3.json("file02.json", function(d) {
        data.set(d.code, +d.pop)
    })
]).then(function(loadData){

and in version 4, for example:

d3.queue()
  .defer(d3.json, "file01.json")
  .defer(d3.json, "file02.json", function(d) { data.set(d.code, +d.pop); })
  .await(ready);

I tried both in version 7 and received the notice that promise or queue are not a function. So I interpreted that in version 7 there's another way to load two external files.

Thanks for any help which I couldn't find until now, despite searching all over the in Internet. There's a lot of material about version 3 to 6, but much less to version 7.

Answer 1

d3.json in d3 v7 returns a promise, so what you wrote is almost correct. Just that the second argument isn't for manipulating data (it's for passing additional options to the fetch call: see fetch() API). d3.json uses the browser's inbuilt fetch() API.

To manipulate data you will have to do it in the then callback function.

Promise.all([
    d3.json('file01.json'),
    d3.json('file02.json')
]).then(function([data01, data02]){

  // manipulate data here
  // data01
  // data02
})

See working example in this codepen Check console for data being logged after being fetched.