All examples By author By category About


Progress Events

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); })

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.