javascriptでサーバーにあるCSVファイルをD3.jsで読み込んでいるのですが、読み込むタイミングが悪いのか、時々うまくデータを読みこまないことがあります。その場合、少し待ってからブラウザのreloadを何度か押すとうまく読み込んでくれるのですが、サーバーからデータを確実に読み込んでから次の処理に進ませるにはどうしたらいいでしょうか?


>||
//CSVファイルからクイズのタイトルを読み取る 
var dataset0 = [];
d3.csv([parafilename], function(data) {
//CSVファイルのタイトルの一行目の文字だけを選択する。
title0 = data.map(function(d) { return d[para]; });
title = title0[0];
console.log(dataset0);
});

//初期設定へ進む
||<

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2015/12/07 11:35:03

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

こんな感じのコードを動かしてみると、理由が分かると思います。

d3.csv("foo.csv", function(data) {
    console.log("(1)");
    console.log(data);
});
console.log("(2)");

出力は、

(1)
Array [ Object, ...]
(2)

ではなく、通常は、こうなります。

(2)
(1)
Array [ Object, ...]

d3.js では csv を取ってくるのに非同期で処理をします。
データ取得のメソッドを呼ぶと、データの到着を待たずにメソッドからすぐに戻ってきます。
渡したコールバック関数は、データを取得したときに呼び出されます。

# d3.csv(url, accessor], callback])

Issues an HTTP GET request for the comma-separated values (CSV) file at the specified url. The file contents are assumed to be RFC4180-compliant. The mime type of the request will be "text/csv". The request is processed asynchronously, such that this method returns immediately after opening the request. When the CSV data is available, the specified callback will be invoked with the parsed rows as the argument.

CSV ? mbostock/d3 Wiki ? GitHub

なので、d3.csv の後に書いたコードの方が先に実行され、d3.csv に渡したコールバックの方が後で実行される、というふうになります。

一番、単純な対応はコールバック関数の中に、パラメータを使った初期設定の処理を記述することです。

//CSVファイルからクイズのタイトルを読み取る 
var dataset0 = [];
d3.csv([parafilename], function(data) {
    //CSVファイルのタイトルの一行目の文字だけを選択する。
    title0 = data.map(function(d) { return d[para]; });
    title = title0[0];
    console.log(dataset0);

    //★ 初期設定は、ここでやる
});
他4件のコメントを見る
id:kajironpu

ありがとうございます。
1つ1つ、設定したほうがいいのですね
なるほど、全部のデータがゲットできたら次に進むやり方ですね
試してみます。

2015/12/02 17:25:39
id:kajironpu

a-kuma3 さん

2015/12/08 18:01:13

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません