d3：使 d3.csv 函数同步答案

【问题标题】：d3: make the d3.csv function syncronousd3：使 d3.csv 函数同步
【发布时间】：2013-11-11 04:46:07
【问题描述】：

有没有办法让 d3.csv() 同步而不是异步？

由于我根据页面上的不同触发器加载了多个 csv 文件，因此我的代码与回调变得一团糟。

【问题讨论】：

标签： d3.js

【解决方案1】：

d3.csv 在设计上是异步的，以防止页面冻结，因此如果不更改 d3 库本身就无法更改。

但是，您可以通过 d3.text() 预加载所有文件并调用 d3.csv.parse 或 d3.csv.parseRows，鉴于文本文件已加载，这将是同步的。

例如，请参阅 Mike Bostock 在这篇帖子 this post 中的回答。

【讨论】：

你提到的所有函数都是异步的。他们正在发出 AJAX 请求，因此您无法使它们同步。如果要同步数据加载，则必须在页面中嵌入数据。

【解决方案2】：

您可以通过将 d3.js 与 deferred/promise 相结合来解决“回调地狱”问题。

Jquery.deferred 示例：

var getCsv = function (csvUrl) {
    var defer = $.Deferred();
    d3.csv(csvUrl, function (error, rows) {
        if (error) {
            defer.reject(error);
        }
        defer.resolve(rows);
    });
    return defer.promise();
};

$.when(
    getCsv("data/test1.csv"), // please pass csv url as you like
    getCsv("data/test2.csv")  // please pass csv url as you like
).done(function (res1, res2) {
    console.log(res1); // test1.csv parsed by d3.js
    console.log(res2); // test2.csv parsed by d3.js
}).fail(function (err) {
    console.log(err);
});

【讨论】：

【解决方案3】：

如果 d3 无法实现（如 THK 所述），则可以使用 jquery.ajax()，其中有一个异步字段可以设置为 false。请看下面的例子：

function getdatafromfile(filename)  {
// Read annotation file. Example : %timeinstant \t %value \n
// Return an array of string
var arraydata;
$.ajax({
      type: "GET",
      url: filename,
      dataType: "text",
      async: false,
      success: function(csv) {arraydata = $.csv.toArrays(csv,{separator:'\t'}); }
      });
return arraydata;
}

【讨论】：

var 和 return 上不需要分号？这个标准js允许吗？
顺便说一句，这似乎是一个很好的解决方案。对于更一般的处理是否有类似的东西（即不一定要获取 url？）
@javadba。我编辑了答案并添加了分号。感谢 cmets
$.csv 无法解析：浏览器显示undefined