尝试向Queue.js中添加XHR以显示进度 [英] Trying to add an XHR to Queue.js to show progress

问题描述

我想通过以下代码将进度表添加到我的文件：
进度事件

我有一个进度正常的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） b $ b}）
）
 .await（transformData）; 
  
我收到错误：
 
 
 
 TypeError：Object＃没有方法'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 ; 
  
任何帮助是赞赏，我不明白为什么它不工作。我想我可以只传递一个有效的XHR到Queue.js。
解决方案
 Queue.js期望得到一个函数接受回调参数。在你的代码中，你传递一个evaluate函数，所以它不会工作。以下代码应该。
  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））; 
}; 
}）; 
} b .get（function（error，data）{
 meter.transition（）。delay（250）.attr（transform，scale（0））; 
f 
}）
}）
 .await（transformData）; 
  
 
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.
解决方案
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);


                        
这篇关于尝试向Queue.js中添加XHR以显示进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！