This example demonstrates how to display the progress of an asynchronous request. Rather than saying d3.json(url, callback)
, use d3.json(url)
to first create the request object, then register a "progress" event listener with xhr.on before starting the request with xhr.get.
You can also use this pattern to listen to "load" and "success" events separately. For example:
var xhr = d3.json(url)
.on("progress", function() { console.log("progress", d3.event.loaded); })
.on("load", function(json) { console.log("success!", json); })
.on("error", function(error) { console.log("failure!", error); })
.get();
This pattern also lets you cancel in-progress requests using xhr.abort, register custom headers with xhr.header, and even change the HTTP method and request body using xhr.send.