web-dev-qa-db-ja.com

D3の複数のcsvファイルからのデータのインポート

私はD3を初めて使用し、プロジェクトに取り組み始めました。私の質問はこれです。 D3の2つのcsvファイルからデータをインポートして、グラフの比較に使用したい。私が直面している問題は次のとおりです。

1.複数のcsvファイルからデータをインポートするにはどうすればよいですか。
2。csvごとに1つの配列を使用できますか、またはD3は1つのグローバルデータ配列のみを使用しますか？
3。インポートするcsvファイルから特定の列を選択する方法はありますか？

ここに例があります。個別の配列の各ファイルから「oldVer」をインポートし、2つの配列を使用して作業します。それはD3で可能ですか？

csv 1
time、oldVer、newVer、oldT、newT
1,180930,190394,24,59
2,198039,159094,26,45
3,152581,194032,22,61

csv 2
time、oldVer、newVer、oldT、newT
1,184950,180435,27,26
2,120590,129409,13,13
3,165222,182133,60,54

馬鹿げた質問で申し訳ありませんが、私はこの問題についてほとんどフィードバックを見つけませんでした。任意の助けをいただければ幸いです。

javascriptarrayscsvimportd3.js
22
John M.

D3バージョン5では、_Promise.all_を使用して複数のcsvファイルをロードできます。例：

_Promise.all([
    d3.csv("file1.csv"),
    d3.csv("file2.csv"),
]).then(function(files) {
    // files[0] will contain file1.csv
    // files[1] will contain file2.csv
}).catch(function(err) {
    // handle error here
})
_

d3 v5でのcsvのロードに関する詳細

Promise.all()に関する詳細情報

25
Abang F.

単にd3.csvを数回呼び出すだけです。

d3.csv("csv1.csv", function(error1, data1) {
  d3.csv("csv2.csv", function(error2, data2) {
    // do something with the data
  });
});

3番目の質問については、いいえ、D3はすべてを解析します。ただし、すべてのデータを使用する必要はありません。そのため、1つの列だけに関心がある場合は、その列のデータを使用してください。

14
Lars Kotthoff

D3 queue を使用して、ファイルを同時にロードできます。例;

d3.queue()
.defer(d3.csv, "file1.csv")
.defer(d3.csv, "file2.csv")
.await(function(error, file1, file2) {
    if (error) {
        console.error('Oh dear, something went wrong: ' + error);
    }
    else {
        doStuff(file1, file2);
    }
});
13
Stuart Hallows

あなたのパート3に答えるために

  1. インポートするcsvファイルから特定の列を選択する方法はありますか？

いいえ、CSVの一部をロードすることはできません。ただし、CSVファイル全体をロードして、そこから1つの列を選択的に使用することができます。 data.newVerを参照して、newVer列データを利用できます。

1
travelsize

Stuart Hallowsの答えは正解です。d3.queueは、d3で複数のファイルをロードするために使用されます。 Lars Kotthoffの応答のように複数のファイルのロードをネストすることはお勧めしません。これはベストプラクティスではありません。

[〜＃〜] edit [〜＃〜]：ネストがベストプラクティスではない理由を明確にしたいと思います。コードの可読性/理解能力が低下し、コードの複数の非同期ブロック（つまり、コールバックとプロミス）を処理するためのより良い、よりセマンティックな方法もあります。

すべてのファイル読み込みタスクが完了した後で、コールバックを使用して結果をそれに渡す方が良いでしょう。コールバックにより、複数のリソース要求を入れ子のピラミッドで相互に入れ子にする必要がなくなります。

ちなみに、ばかげた質問ではありません。

0
travelsize