d3.js（v4、v5）で、CSVファイルを読み込むには、d3.csv メソッドを使用します。
CSVファイルを読み込む
v4、v5とも以下のコードでCSVファイルを読み込むことができます。
読み込むCSVファイル（resource.csv）
|
1 2 3 4 |
name,sales apple,100 peach,75 banana,120 |
javascript
|
1 2 3 4 5 6 7 8 |
d3.csv("resource.csv", function(error, data){ // エラー処理 if(error != null){ ・・・ return; } // 通常処理（dataを使用してグラフを描画） }); |
読み込んだCSVは、配列データとして使用することができます。
|
1 2 3 4 5 |
[ {name: "apple", sales: "100"}, {name: "peach", sales: "75"}, {name: "banana", sales: "120"} ] |
また、次のようにすると、読み込んだCSVデータに共通の加工を行いグラフを描画することができます。
|
1 2 3 4 5 6 7 8 9 |
d3.csv("resource.csv", function(data,i) { return { name: i + "_" + data.name, // nameの前に「インデックス番号_」を追加 sales: data.sales }; }).then(function(data) { console.log(data); // グラフを描画 }); |
この例では、読み込んだCSVのnameデータの前に、”インデックス番号_”を追加した結果をグラフ描画データとして渡しています。
then(function(data))の引数dataの内容は、次のようになります。
|
1 2 3 4 5 |
[ {name: "0_apple", sales: "100"}, {name: "1_peach", sales: "75"}, {name: "2_banana", sales: "120"} ] |
name要素の値に、”インデックス番号_”が追加されていることが分かります。
このように、d3.csv を使用すると簡単にCSVファイルを読み込むことができます。