d3.js - d3：使 d3.csv 函数同步

Question

有什么方法可以使 d3.csv() 同步而不是异步？

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

Answer 1

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

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

例如，请参阅本文中的 Mike Bostock 的回答。

Answer 2

如果 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;
}

Answer 3

您可以通过将 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);
});