Load multiple files using the d3-fetch module
Solution 1:
The d3-fetch module makes use of the Fetch API and will, therefore, return a Promise
for each request issued via one of the module's convenience methods. To load multiple files at once you could use Promise.all
which will return a single Promise that resolves once all Promises provided to the call have resolved.
import { csv, json } from 'd3-fetch'
Promise.all([
csv('/data/stations.csv'),
json('data/svg_data.json')
])
.then(([stations, svg]) => {
// Do your stuff. Content of both files is now available in stations and svg
});
Here, d3.csv
and d3.json
are provided to fetch content from two files. Once both requests have completed, i.e. both Promises have resolved, the content of each file is provided to the single Promise's .then()
method call. At this point you are able to access the data and execute the rest of your code.