Trying to add an XHR to Queue.js to show progress

Question

I am trying to add a progress meter to my files by following this code: Progress Events

I have an XHR with progress working fine like so:

d3.csv("data/WLAN2.csv")
    .on("progress", function() {
      var i = d3.interpolate(progress, d3.event.loaded / d3.event.total);
      d3.transition().tween("progress", function() {
        return function(t) {
          progress = i(t);
          foreground.attr("d", arc.endAngle(twoPi * progress));
          text.text(formatPercent(progress));
        };
      });
    })
    .get(function(error, data) {
      meter.transition().delay(250).attr("transform", "scale(0)");
    })

I now try to add this with Queue.js and it does not work:

queue()
.defer(d3.csv("data/WLAN2.csv")
    .on("progress", function() {
      var i = d3.interpolate(progress, d3.event.loaded / d3.event.total);
      d3.transition().tween("progress", function() {
        return function(t) {
          progress = i(t);
          foreground.attr("d", arc.endAngle(twoPi * progress));
          text.text(formatPercent(progress));
        };
      });
    })
    .get(function(error, data) {
      meter.transition().delay(250).attr("transform", "scale(0)");
    })
)
.await(transformData);

I get the error:

Uncaught TypeError: Object # has no method 'apply'

If I try a very dumbed down version, it works:

queue()
.defer(d3.csv("data/WLAN2.csv")
    .on("progress", function() { 
       console.log("Loading data/WLAN2.csv: ",formatPercent(d3.event.loaded/d3.event.total));                                                        })
    .get) 
.await(transformData);

Any help is appreciated, I don't understand why its not working. I thought I could just pass in a valid XHR to Queue.js.

Answer 1

Queue.js expects to be given a function that accepts a callback argument. In your code, you're passing an evaluated function, so it won't work. The following code should.

queue()
.defer(function(f) {
  d3.csv("data/WLAN2.csv")
    .on("progress", function() {
       var i = d3.interpolate(progress, d3.event.loaded / d3.event.total);
       d3.transition().tween("progress", function() {
         return function(t) {
           progress = i(t);
           foreground.attr("d", arc.endAngle(twoPi * progress));
           text.text(formatPercent(progress));
         };
     });
  })
  .get(function(error, data) {
    meter.transition().delay(250).attr("transform", "scale(0)");
    f(error, data);
  })
})
.await(transformData);