未来電子テクノロジーでインターンをしているりくです。
前回に続き、D3.jsでできることの探求をしていきます。
していることは前回と同じですが、できることを増やすためにコードを書き変えています。
というのも、前回のは
- 一定数以上のデータがあると全て表示されず、データが見切れてしまう
- データを入れるにはdatasetに入れる必要があるため、数字を入れる専用のファイルが欲しい
前のやり方だと頭に入らなかった
といった理由から新たに書き直しました。
CSVファイルを読み取る
graph.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>改良版</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script>
var dataset = d3.csv("data.csv", function(error, data) {
console.log(data);
});
var w = 500;
var h = 500;
var padding = 30;
var svg = d3
.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var xScale = d3
.scaleBand()
.rangeRound([padding, w - padding])
.padding(0.1)
.domain(
dataset.map(function(d) {
return d.name;
})
);
var yScale = d3
.scaleLinear()
.domain([
0,
d3.max(dataset, function(d) {
return d.value;
})
])
.range([h - padding, padding]);
svg
.append("g")
.attr("transform", "translate(" + 0 + "," + (h - padding) + ")")
.call(d3.axisBottom(xScale));
svg
.append("g")
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d) {
return xScale(d.name);
})
.attr("y", function(d) {
return h;
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return -30;
}) // -30 何回かやってこれが1番合ってた
.transition()
.duration(500)
.delay(function(d, i) {
return i * 50;
})
.attr("y", function(d) {
return yScale(d.value);
})
.attr("height", function(d) {
return h - padding - yScale(d.value);
})
.attr("style", "fill:red");
</script>
</body>
</html>
data.csv
name,value
A,5
B,6
C,8
D,1
E,2
F,6
G,8
H,6
I,10
J,9
K,11
L,21
完成したのが以下の通りです。
上のアニメーションをさせるためにいろいろ繰り返した結果できた産物達
上記のコードにたどり着くまでにいろいろコードを試してみたのですが、なかなか(個人的に)おもしろいムーブをしたので、いくつか紹介します。
色が変わっていくアニメーション
graph.html
svg.append("g")
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d) {
return xScale(d.name);
})
.attr("y", function(d) {
return yScale(d.value);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return h - padding - yScale(d.value);
}) //ここからアニメーション
.transition()
.duration(500)
.delay(function(d, i) {
return i * 50;
})
.attr("style", "fill:red");
すると、こんなことになります。
意図してない動きだったけどこれはこれでアリやな!
グラフが迫ってくるアニメーション
アニメーションのコードを上にするだけで(処理の順番が変わるので当たり前ですが)かなり変わります。
graph.html
svg.append("g")
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.transition() //ここからアニメーション
.duration(500)
.delay(function(d, i) {
return i * 50;
})
.attr("style", "fill:red")
.attr("x", function(d) {
return xScale(d.name);
})
.attr("y", function(d) {
return yScale(d.value);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return h - padding - yScale(d.value);
});
こうすると、遠くからグラフが攻めてくるみたいでかっこいいですね!
グラフが降ってくるアニメーション
graph.html
svg
.append("g")
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d) {
return xScale(d.name);
})
.attr("y", function(d) {
return yScale(d.value);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return h - padding - yScale(d.value);
})
.transition()
.duration(500)
.delay(function(d, i) {
return i * 50;
})
.attr("style", "fill:red");
これは、上からグラフが降ってくるようなアニメーションをするコードです。
棒グラフが地面に着地した演出ができあがります。
落ちて色が変化するアニメーション
graph.html
svg
.append("g")
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d) {
return xScale(d.name);
})
.attr("y", 0)
.attr("width", xScale.bandwidth())
.attr("height", 100)
.transition()
.duration(500)
.delay(function(d, i) {
return i * 50;
})
.attr("y", function(d) {
return yScale(d.value);
})
.attr("height", function(d) {
return h - padding - yScale(d.value);
})
.attr("style", "fill:red");
これは、先ほどのように上からグラフが降ってくるのですが、降る前に無色(黒)の状態で待機していて、アニメーションが開始したら色がついて降ってくるものになりました。
うまくできれば、つららが落ちてくるような演出とかもできそう。
まとめ
こんなのが意図しなくてもできるんだからいろいろ試してみるもんですね～
意図してできたらいいんですけど