d3.js - d3: d3.csv 関数を同期させる

Question

d3.csv() を非同期ではなく同期にする方法はありますか?

ページのさまざまなトリガーに従って複数のcsvファイルをロードするため、コードがコールバックで混乱しています。

Answer 1

d3.csv は、ページがフリーズしないように設計上非同期であるため、d3 ライブラリ自体を変更しないと変更できません。

ただし、d3.text() を介してすべてのファイルを事前にロードし、d3.csv.parse または d3.csv.parseRows を呼び出すことができます。これは、テキスト ファイルがロードされている場合に同期されます。

例については、この投稿この投稿のマイク ボストックの回答を参照してください。

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

Answer 3

d3 で不可能な場合 (THK が述べているように)、false に設定できる async フィールドがある jquery.ajax() で可能です。以下の例を参照してください。

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