This post explains how to use D3 to perform a set of tasks asynchronously and wait until those tasks have been completed before performing another task.
I’ll use loading a CSV data set as an example of a task that can be performed asynchronously. D3 loads CSV data asynchronously using the
To simulate a list of CSV-loading tasks, we’ll create an array of filenames that correspond to files containing CSV data:
To perform tasks asynchronously using D3, we need to use the
queue object provided by a separate D3 library called d3-queue, which can be installed using NPM, Bower or by downloading the latest release.
First, we create the D3 queue that will hold the asynchronous CSV-loading tasks:
To build the queue of asynchronous tasks, we iterate over the array of CSV filenames. For each CSV filename, we use the queue’s
defer method to add a call to the
d3.csv function with the name of the next CSV file as a parameter:
After adding the asynchronous CSV-loading tasks, we call the
awaitAll method to start processing the tasks on the queue. When all the asynchronous tasks have been completed, the
awaitAll method calls the anonymous callback function. Each data set loaded from the CSV files is stored as an element of the
We can access each CSV data set either by indexing the
csvDataSets array (e.g.
csvDataSets) or by iterating over each element:
Although I’ve used loading CSV files with the
d3.csv function, this technique also works with other functions that have the same signature as
d3.csv, such as
d3.json, which loads JSON data:
Asynchronous JSON-loading tasks are queued in the same way as CSV-loading tasks, i.e. by calling
queue.defer with the
d3.json function and the name of a JSON file: