试图将XHR添加到Queue.js以显示进度

Question

我正试图通过以下代码向我的文件中添加一个进度表：进度事件

我有一个进展良好的XHR，如下所示：

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

我现在尝试在Queue.js中添加这一点，但是它不起作用：

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

我知道错误：

未指明的TypeError:对象#没有“应用”方法

如果我尝试了一个非常简单的版本，它就会奏效：

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

任何帮助都是感激的，我不明白为什么它不起作用。我想我可以把一个有效的XHR传递给Queue.js。

Answer 1

Queue.js希望得到一个接受回调参数的函数。在您的代码中，您传递的是一个求值的函数，因此它无法工作。下面的代码应该。

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