D3js-working-example
D3.js-作業例
この章では、アニメーション化された棒グラフを実行しましょう。 この例では、人口記録の前章で使用したdata.csvファイルをデータセットとして使用し、アニメーション化された棒グラフを生成します。
これを行うには、次の手順を実行する必要があります-
ステップ1 *-*スタイルを適用-以下に示すコーディングを使用してCSSスタイルを適用します。
<style>
.bar {
fill: green;
}
.highlight {
fill: red;
}
.title {
fill: blue;
font-weight: bold;
}
</style>
ステップ2 *-*変数の定義-以下のスクリプトを使用してSVG属性を定義します。
<script>
var svg = d3.select("svg"), margin = 200,
width = svg.attr("width") - margin,
height = svg.attr("height") - margin;
</script>
ステップ3 *-*テキストの追加-次に、テキストを追加し、以下のコーディングを使用して変換を適用します。
svg.append("text")
.attr("transform", "translate(100,0)")
.attr("x", 50)
.attr("y", 50)
.attr("font-size", "20px")
.attr("class", "title")
.text("Population bar chart")
ステップ4 *-*スケール範囲の作成-このステップでは、スケール範囲を作成し、グループ要素を追加できます。 以下に定義されています。
var x = d3.scaleBand().range([0, width]).padding(0.4),
y = d3.scaleLinear()
.range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")");
ステップ5 *-*データの読み取り-前の例では、すでに data.csv ファイルを作成しています。 同じファイル、ここで使用しました。
year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62
次に、以下のコードを使用して上記のファイルを読み取ります。
d3.csv("data.csv", function(error, data) {
if (error) {
throw error;
}
ステップ6 *-*ドメインの設定-次に、以下のコーディングを使用してドメインを設定します。
x.domain(data.map(function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
ステップ7 *- X軸の追加*-これで、X軸を変換に追加できます。 以下に示します。
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)).append("text")
.attr("y", height - 250).attr("x", width - 100)
.attr("text-anchor", "end").attr("font-size", "18px")
.attr("stroke", "blue").text("year");
ステップ8 *- Y軸の追加*-以下に示すコードを使用して、Y軸を変換に追加します。
g.append("g")
.append("text").attr("transform", "rotate(-90)")
.attr("y", 6).attr("dy", "-5.1em")
.attr("text-anchor", "end").attr("font-size", "18px")
.attr("stroke", "blue").text("population");
ステップ9 *-*グループ要素の追加-次に、グループ要素を追加し、以下で定義するようにY軸に変換を適用します。
g.append("g")
.attr("transform", "translate(0, 0)")
.call(d3.axisLeft(y))
ステップ10 *-*バークラスを選択-次に、以下で定義するようにバークラスのすべての要素を選択します。
g.selectAll(".bar")
.data(data).enter()
.append("rect")
.attr("class", "bar")
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut)
.attr("x", function(d) { return x(d.year); })
.attr("y", function(d) { return y(d.population); })
.attr("width", x.bandwidth())
.transition()
.ease(d3.easeLinear)
.duration(200)
.delay(function (d, i) {
return i * 25;
})
.attr("height", function(d) { return height - y(d.population); });
});
ここでは、アニメーションを実行するためのmouseoutおよびmouseoverのリスナーイベントを追加しました。 マウスが特定のバーの上にホバーし、そこから出たときにアニメーションを適用します。 これらの機能については、次のステップで説明します。
- .ease(d3.easeLinear)*関数は、アニメーションで見かけの動きを実行するために使用されます。 200の持続時間でスローインおよびスローアウトモーションを処理します。 遅延は次を使用して計算できます-
.delay(function (d, i) {
return i * 25;
})
ステップ11 *-*マウスオーバーイベントハンドラー関数-マウスオーバーイベントハンドラーを作成して、次のようにマウスイベントを処理します。
function onMouseOver(d, i) {
d3.select(this)
.attr('class', 'highlight');
d3.select(this)
.transition()
.duration(200)
.attr('width', x.bandwidth() + 5)
.attr("y", function(d) { return y(d.population) - 10; })
.attr("height", function(d) { return height - y(d.population) + 10; });
g.append("text")
.attr('class', 'val')
.attr('x', function() {
return x(d.year);
})
.attr('y', function() {
return y(d.value) - 10;
})
}
ここで、マウスオーバーイベントで、バーの幅と高さを増やし、選択したバーのバーの色を赤にします。 色については、選択したバーの色を赤に変更するクラス「ハイライト」を追加しました。
200ミリ秒の期間のバーへの遷移関数。 バーの幅を5px、高さを10px増やすと、バーの以前の幅と高さから新しい幅と高さへの移行は200ミリ秒の期間になります。
次に、新しい高さの値によってバーが歪まないように、バーの新しい「y」値を計算しました。
ステップ12 *- Mouseoutイベントハンドラー関数*-マウスイベントを処理するmouseoutイベントハンドラーを作成します。 以下に定義されています。
function onMouseOut(d, i) {
d3.select(this).attr('class', 'bar');
d3.select(this)
.transition()
.duration(400).attr('width', x.bandwidth())
.attr("y", function(d) { return y(d.population); })
.attr("height", function(d) { return height - y(d.population); });
d3.selectAll('.val')
.remove()
}
ここで、mouseoutイベントで、mouseoverイベントで適用した選択機能を削除します。 したがって、バークラスを元の「バー」クラスに戻し、選択したバーの幅と高さを元に戻し、y値を元の値に戻します。
- d3.selectAll( ‘。val’)。remove()*関数は、バーの選択中に追加したテキスト値を削除するために使用されます。
ステップ13 *-*作業例-完全なプログラムは、次のコードブロックに記載されています。 animated_barl というWebページを作成し、次の変更を加えます。
<!DOCTYPE html>
<html>
<head>
<style>
.bar {
fill: green;
}
.highlight {
fill: red;
}
.title {
fill: blue;
font-weight: bold;
}
</style>
<script src = "https://d3js.org/d3.v4.min.js"></script>
<title> Animated bar chart </title>
</head>
<body>
<svg width = "500" height = "500"></svg>
<script>
var svg = d3.select("svg"),
margin = 200, width = svg.attr("width") - margin,
height = svg.attr("height") - margin;
svg.append("text")
.attr("transform", "translate(100,0)")
.attr("x", 50).attr("y", 50)
.attr("font-size", "20px")
.attr("class", "title")
.text("Population bar chart")
var x = d3.scaleBand().range([0, width]).padding(0.4),
y = d3.scaleLinear().range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")");
d3.csv("data.csv", function(error, data) {
if (error) {
throw error;
}
x.domain(data.map(function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.append("text")
.attr("y", height - 250)
.attr("x", width - 100)
.attr("text-anchor", "end")
.attr("font-size", "18px")
.attr("stroke", "blue").text("year");
g.append("g")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "-5.1em")
.attr("text-anchor", "end")
.attr("font-size", "18px")
.attr("stroke", "blue")
.text("population");
g.append("g")
.attr("transform", "translate(0, 0)")
.call(d3.axisLeft(y))
g.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut)
.attr("x", function(d) { return x(d.year); })
.attr("y", function(d) { return y(d.population); })
.attr("width", x.bandwidth()).transition()
.ease(d3.easeLinear).duration(200)
.delay(function (d, i) {
return i * 25;
})
.attr("height", function(d) { return height - y(d.population); });
});
function onMouseOver(d, i) {
d3.select(this)
.attr('class', 'highlight');
d3.select(this)
.transition()
.duration(200)
.attr('width', x.bandwidth() + 5)
.attr("y", function(d) { return y(d.population) - 10; })
.attr("height", function(d) { return height - y(d.population) + 10; });
g.append("text")
.attr('class', 'val')
.attr('x', function() {
return x(d.year);
})
.attr('y', function() {
return y(d.value) - 10;
})
}
function onMouseOut(d, i) {
d3.select(this)
.attr('class', 'bar');
d3.select(this)
.transition()
.duration(200)
.attr('width', x.bandwidth())
.attr("y", function(d) { return y(d.population); })
.attr("height", function(d) { return height - y(d.population); });
d3.selectAll('.val')
.remove()
}
</script>
</body>
</html>
ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。
バーを選択すると、赤色で強調表示されます。 D3は、データの情報、ドキュメント、要素などへの変換を扱う汎用視覚化ライブラリであり、最終的にはデータ視覚化の作成に役立ちます。