.csvファイルからデータを読み込む方法をご紹介します。
d3.csv() メソッドを使いますが、v5から使い方が少し変更されています。
目次
.csvファイルのサンプル
サンプルで、こんなカンマ（,)区切りのdata.csvファイルを用意します。
一行目は見出しです。
month,tempHigh
1,4
2,6
3,11
4,18
5,22
6,27
7,29
8,29
9,25
10,18
11,13
12,7
HTML/JavaScriptサンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
svg{
}
</style>
<script src="d3.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>
var DATAPATH = "datacsv.csv";
// データの準備
d3.csv("data.csv").then(function(data) {
var text = "";
for(var i = 0; i < data.length; i++){
text += data[i].month + "月の最高気温 " + data[i].tempHigh + "℃<br>";
}
d3.select("#result").html(text);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
svg{
}
</style>
<script src="d3.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>
// データの準備
d3.csv("data.csv").then(function(data) {
var text = "";
for(var i = 0; i < data.length; i++){
text += data[i].month + "月の最高気温 " + data[i].tempHigh + "℃<br>";
}
d3.select("#result").html(text);
console.log(data); // Debug用
}).catch(function(error){
// handle error
});
</script>
</body>
</html>
}).catch(function(error){
// handle error
});
</script>
</body>
</html>
d3.csv()メソッドを使って、csvファイルからデータを読み込みます。
v5ではコールバックではなく、Promisesが返却されるので以下のような書き方になります。
// データの準備
d3.csv("data.csv").then(function(data) {
var text = "";
for(var i = 0; i < data.length; i++){
text += data[i].month + "月の最高気温 " + data[i].tempHigh + "℃<br>";
}
d3.select("#result").html(text);
console.log(data); // Debug用
}).catch(function(error){
// handle error
});結果
このようなHTMLタグが追加されました。
1月の最高気温 4℃
2月の最高気温 6℃
3月の最高気温 11℃
4月の最高気温 18℃
5月の最高気温 22℃
6月の最高気温 27℃
7月の最高気温 29℃
8月の最高気温 29℃
9月の最高気温 25℃
10月の最高気温 18℃
11月の最高気温 13℃
12月の最高気温 7℃Debug用コンソール
ブラウザのデバックコンソールの出力を見ても、下記のようにデータが読み込まれているのがわかります。
(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, columns: Array(2)]
0: {month: "1", tempHigh: "4"}
1: {month: "2", tempHigh: "6"}
2: {month: "3", tempHigh: "11"}
3: {month: "4", tempHigh: "18"}
4: {month: "5", tempHigh: "22"}
5: {month: "6", tempHigh: "27"}
6: {month: "7", tempHigh: "29"}
7: {month: "8", tempHigh: "29"}
8: {month: "9", tempHigh: "25"}
9: {month: "10", tempHigh: "18"}
10: {month: "11", tempHigh: "13"}
11: {month: "12", tempHigh: "7"}
columns: (2) ["month", "tempHigh"]
length: 12
__proto__: Array(0)まとめ
以上、d3.jsでCSVファイルを読み込むサンプルでした。
関連情報
リンク
リンク
リンク
