この記事でやること
- D3.jsでCSV形式のデータファイルを元に棒グラフを表示します
- 元データ：CSVファイル
- 描画方法：HTML（あまり良い使い方ではありませんが、今回は例として）
- 要素の追加と属性設定を行います
ソースコード
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 基本スタイルシート -->
<link rel="stylesheet" type="text/css" href="main.css">
<title>D3.js CSVデータから棒グラフを表示</title>
</head>
<body>
<!-- 棒グラフの描画先-->
<div id="graph"></div>
</body>
<!-- D3.js -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- 本体処理 -->
<script src="main.js"></script>
</html>
JavaScript
main.js
// 読み込みCSVファイル
var DATA_FILE_PATH = './data.csv';
// グラフ描画先
var TARGET_ELEMENT_ID = '#graph';
// 項目名：名前
var COL_NAME = 'name';
// 項目名：値
var COL_VALUE = 'value';
drawGraph();
/**
* 棒グラフの描画
*/
function drawGraph() {
// 第2引数のlistの中に読み込んだCSVデータがある
d3.csv(DATA_FILE_PATH, function(error, list){
// グラフの外枠テーブル作成
var table = d3.select(TARGET_ELEMENT_ID)
.append('table')
.selectAll()
.data(list)
.enter();
// 行作成
var row = table.append('tr');
// 項目名セル
row.append('th')
.text(function(d) {
return d[COL_NAME];
});
// 値セルと棒表示
row.append('td')
.append('div')
.attr('class', 'value')
.attr('style', function(d) {
return 'width:' + d[COL_VALUE] + 'px;';
})
.text(function(d) {
return d[COL_VALUE];
});
});
}
CSS
main.css
/* 棒グラフの棒部分 */
.value {
background-color: #cce;
border: solid 1px #99a;
}
データファイル（CSV）
data.csv
name,value
A-A,200
A-B,100
A-C,150
A-D,100