尝试将 XHR 添加到 Queue.js 以显示进度答案

【问题标题】：Trying to add an XHR to Queue.js to show progress尝试将 XHR 添加到 Queue.js 以显示进度
【发布时间】：2014-04-01 20:19:03
【问题描述】：

我正在尝试按照以下代码向我的文件添加进度表： Progress Events

我有一个 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);

我得到错误：

Uncaught TypeError: Object # has no method 'apply'

如果我尝试一个非常简单的版本，它会起作用：

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。

【问题讨论】：

Well queue 期望得到一个接受回调参数的函数。在您的完整版本中，您没有传递它。您是否尝试过类似.defer(function(f) { d3.csv(...).on(...).get(function(error, data) { meter...; f(error, data); })}) 的内容？
Lars，您成功了，非常感谢您抽出宝贵时间回复。您能否将此作为“答案”发布，以便我接受？

标签： javascript d3.js queue.js

【解决方案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);

【讨论】：