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.
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.