D3.jsで動的にグラフをどんどん作り出す
D3.jsで動的にグラフをどんどん作り出す:
D3.jsを初めて勉強してグラフを作ったので、それを振り返るって意味でまとめます。
ドットインストールを参考に作成しました。
画像ではわかりませんが、グラフの１本１本にアニメーションがついてます。
https://dotinstall.com/lessons/basic_d3js_v2
D3.jsを初めて勉強してグラフを作ったので、それを振り返るって意味でまとめます。
ドットインストールを参考に作成しました。
完成形
画像ではわかりませんが、グラフの１本１本にアニメーションがついてます。
完成形コード
bar.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>D3.js Practice</title>
</head>
<body>
<svg width="600" height="240">
</svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
(function() {
'use strict';
var WIDTH = 600;
var HEIGHT = 240;
var padding = {
top: 40,
bottom: 40,
left: 100,
right: 40
}
var scores = [
{name: 'A', score: 99},
{name: 'B', score: 200},
{name: 'C', score: 20},
{name: 'D', score: 300},
{name: 'E', score: 120}
]
function update(data) {
var bars = d3.select('svg').selectAll('rect').data(data);
var xScale = d3.scaleLinear()
.domain([0, d3.max(scores, function(d) {
return d.score;
})])
.range([0, WIDTH - padding.left - padding.right])
.nice();
var yScale = d3.scaleBand()
.domain(scores.map(function(d) {
return d.name;
}))
.range([0, HEIGHT - padding.top - padding.bottom])
.padding([0.1]);
var color = d3.scaleOrdinal(d3.schemeCategory10);
bars
.enter()
.append('rect')
.merge(bars)
.attr('x', padding.left)
.attr('y' , function(d, i) {
return yScale(d.name) + padding.top;
})
.attr('width', 0)
.attr('height', yScale.bandwidth())
.attr('fill', function(d, i) {
// return 'hsla(' + i * 30 + ' , 60%, 60%, 0.7)';
return color(i);
})
.transition()
.duration(3000)
.delay(function(d, i) {
return i * 300;
})
.ease(d3.easeElastic)
.attr('width', function(d) {
return xScale(d.score);
});
bars
.exit()
.remove();
d3.selectAll('.axis').remove();
d3.select('svg')
.append('g')
.attr('class', 'axis')
.attr(
'transform',
'translate(' + padding.left + ' , ' + (HEIGHT - padding.bottom) + ')'
)
.call(d3.axisBottom(xScale));
d3.select('svg')
.append('g')
.attr('class', 'axis')
.attr(
'transform',
'translate(' + padding.left + ' , ' + padding.top + ')'
)
.call(d3.axisLeft(yScale));
}
update(scores)
})();
</script>
</body>
</html>
ここからコードの解説
bar.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>D3.js Practice</title>
</head>
<body>
<!-- これが今回グラフを構成する唯一のhtml要素です。このsvg要素を動的に増やしていきます。 -->
<svg width="600" height="240">
</svg>
<!-- ここでD3.jsを読み込み -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
(function() {
// これでgoogleのコンソールで見たときにエラーの箇所が厳密にわかるようになるようです
'use strict';
//ここで要素の大きさ等を定義しています。（cssの部分）
var WIDTH = 600;
var HEIGHT = 240;
var padding = {
top: 40,
bottom: 40,
left: 100,
right: 40
}
//グラフで使用するデータを定義（ここはcsv読み込みもできるようです）
var scores = [
{name: 'A', score: 99},
{name: 'B', score: 200},
{name: 'C', score: 20},
{name: 'D', score: 300},
{name: 'E', score: 120}
]
//ここからupdateという関数を定義
function update(data) {
//上にあるsvg要素を選択し、その中のrect要素を選択します。
var bars = d3.select('svg').selectAll('rect').data(data);
//svg要素のx座標（横の動き）を設定しています。
var xScale = d3.scaleLinear()
.domain([0, d3.max(scores, function(d) {
return d.score;
})])
.range([0, WIDTH - padding.left - padding.right])
.nice();
//svg要素のy座標（縦の動き）を設定しています。
var yScale = d3.scaleBand()
.domain(scores.map(function(d) {
return d.name;
}))
.range([0, HEIGHT - padding.top - padding.bottom])
.padding([0.1]);
//色の定義（D3.jsで設定されているカラーバリエーションを使う）
var color = d3.scaleOrdinal(d3.schemeCategory10);
//ここからsvg要素を動的に作成しています。
bars
//svg要素の作成
.enter()
//svg要素の中にrect要素を追加
.append('rect')
.merge(bars)
//svg要素の縦と横の座標を設定
.attr('x', padding.left)
.attr('y' , function(d, i) {
return yScale(d.name) + padding.top;
})
//svg要素の高さと幅を
.attr('width', 0)
.attr('height', yScale.bandwidth())
//svg要素の色をバラバラにする
.attr('fill', function(d, i) {
// return 'hsla(' + i * 30 + ' , 60%, 60%, 0.7)';
return color(i);
})
//svg要素にアニメーションをかける
.transition()
.duration(3000)
.delay(function(d, i) {
return i * 300;
})
.ease(d3.easeElastic)
.attr('width', function(d) {
return xScale(d.score);
});
//上書きされたデータのあまり部分を自動で削除
bars
.exit()
.remove();
d3.selectAll('.axis').remove();
//グラフが画面から飛び出すので、いい感じに位置をずらす（横に）
d3.select('svg')
.append('g')
.attr('class', 'axis')
.attr(
'transform',
'translate(' + padding.left + ' , ' + (HEIGHT - padding.bottom) + ')'
)
.call(d3.axisBottom(xScale));
//グラフが画面から飛び出すので、いい感じに位置をずらす（横に）
d3.select('svg')
.append('g')
.attr('class', 'axis')
.attr(
'transform',
'translate(' + padding.left + ' , ' + padding.top + ')'
)
.call(d3.axisLeft(yScale));
}
//ここまでupdateという関数を定義
//これまでの処理を全て実行！
update(scores)
})();
</script>
</body>
</html>
コメント
コメントを投稿