CODEWITHSUNDEEP
asynchronousqueued3.js
Frank van Wijk
Frank van Wijk

Reputation: 3262

Queue.js with progress event

I want to load multiple files to use in D3.js. Queue.js seems to be a nice tool for that. Since d3.js supports more advanced XHR functionalities in v3, I want to load multiple files with Queue.js and show the loading progress, and abort loading of all files on error.

This is how you check the progress and how to use Queue.js: https://github.com/mbostock/d3/wiki/Upgrading-to-3.0

I don't know how to combine these pieces of code.

This is what I have until now. JSFiddle

I think it is better that there would be a progress event handler on Queue.js, but I don't know how to implement this.

Example code:

queue()
  .defer(d3.json, "file1.json") // https://api.github.com/repos/mbostock/d3")
  .defer(d3.json, "file2.json")
  .progress(function() { console.log(d3.event.loaded/d3.event.total; }) // or use argument?
  .error(function(error) { this.abort(); console.log(error); })
  .await(function(data) { console.log(data); });

Upvotes: 3

Views: 1356

Answers (1)

Sandeep Muthangi
Sandeep Muthangi

Reputation: 131

The object returned by queue() in queue.js doesn't have the methods "progress" and "error". Here is a link to the source code: https://github.com/mbostock/queue/blob/master/queue.js.

As queue.js takes an xhr object and uses 'apply' to execute the function, the following workaround worked for me. It involves using the get() method of an xhr object to execute the function.

Sample code:

queue().defer(d3.json("file1.json")
                 .on("progress", function({console.log(d3.event.loaded);})                                               
                 .get, /*First argument*/ "error")
       .await(function (error, file1_data) {console.log(file1_data);});

Hope this helps.

Upvotes: 1

Related Questions