Stacked-to-Grouped Bars
聊聊堆積柱狀圖和簇狀圖
D3.js官網例子中，將這兩種柱狀圖做在一起進行切換。見圖如下：
堆積柱狀圖
簇狀圖
接下來對這兩種柱狀圖的實現代碼進行詳細解釋
index.html——源碼
<!DOCTYPE html>
<meta charset="utf-8">
<style>
form {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
left: 10px;
top: 10px;
}
label {
display: block;
}
</style>
<form>
<label><input type="radio" name="mode" value="grouped"> Grouped</label>
<label><input type="radio" name="mode" value="stacked" checked> Stacked</label>
</form>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var n = 4, // The number of series.這裏n指的series的個數，即要展示幾個系列或幾個組的數據
m = 58; // The number of values per series.這裏的m指的是每個系列或組中有多少組數據
// The xz array has m elements, representing the x-values shared by all series.
// The yz array has n elements, representing the y-values of each of the n series.
// Each yz[i] is an array of m non-negative numbers representing a y-value for xz[i].
// The y01z array has the same structure as yz, but with stacked [y₀, y₁] instead of y.
// xz中存儲d3.range(m)返回的數組，內容爲從0-57，代表x軸展示的值
var xz = d3.range(m),
// yz中存儲4*58的矩陣，4表示4個序列，58表示每個序列的58個值
yz = d3.range(n).map(function() { return bumps(m); }),
// 1、d3.transpose(matrix)方法用於將矩陣matrix轉置,此處調用d3.transpose(yz)之後，返回
// 一個58*4的矩陣；
// 2、d3.stack()方法返回一個默認的堆棧生成器
// 3、d3.stack().keys()方法爲堆棧生成器設置主鍵
// 4、最後d3.stack().keys(d3.range(n))返回一個主鍵爲0-3的堆棧生成器函數，
// 暫且標記爲stackGen()
// 5、因此 y01z = stackGen(d3.transpose(yz)),即將yz的轉置矩陣轉換爲堆棧的形式
// 綜上1，2，3，4，5可知，y01z中存儲爲繪製堆棧圖形而準備的數據格式
y01z = d3.stack().keys(d3.range(n))(d3.transpose(yz)),
// 獲取yz矩陣中的最大值
yMax = d3.max(yz, function(y) { return d3.max(y); }),
// 獲取y01z矩陣中的最大值，其中後面取d[1]是因爲堆棧結構[y₀, y₁]中，y1>y0
y1Max = d3.max(y01z, function(y) { return d3.max(y, function(d) { return d[1]; }); });
// 獲取svg元素
var svg = d3.select("svg"),
// 定義外邊距
margin = {top: 40, right: 10, bottom: 20, left: 10},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
// 定義g元素，並將其定位
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// 定義x軸比例尺函數
var x = d3.scaleBand()
// 指定定義域
.domain(xz)
// 指定值域
.rangeRound([0, width])
// 設置填充
.padding(0.08);
// 定義y軸比例尺函數
var y = d3.scaleLinear()
// 指定定義域
.domain([0, y1Max])
// 指定值域
.range([height, 0]);
// 定義顏色函數
var color = d3.scaleOrdinal()
// 指定顏色函數的定義域，可以看出，通過系列的索引來計算不同的顏色
.domain(d3.range(n))
// 指定顏色函數的值域
.range(d3.schemeCategory20c);
// 定義堆棧圖的元素
var series = g.selectAll(".series")
// 綁定堆棧數據
.data(y01z)
.enter().append("g")
// 根據系列索引，定義填充色
.attr("fill", function(d, i) { return color(i); });
// 定義柱狀圖的元素
var rect = series.selectAll("rect")
// 爲柱狀圖綁定數據
.data(function(d) { return d; })
.enter().append("rect")
// 每個矩形柱子的橫座標通過上面定義的x()比例尺函數來計算
.attr("x", function(d, i) { return x(i); })
.attr("y", height)
// 設置矩形條的寬度爲上文中定義的x比例尺的刻度寬度
.attr("width", x.bandwidth())
// 設置矩形條的初始高度爲0
.attr("height", 0);
// 爲矩形條柱添加過渡動畫
rect.transition()
// 動畫的延遲時間
.delay(function(d, i) { return i * 10; })
// 通過比例尺函數y,計算動作終點時y屬性的值
.attr("y", function(d) { return y(d[1]); })
// 通過比例尺函數y,計算動作終點時height屬性的值
.attr("height", function(d) { return y(d[0]) - y(d[1]); });
// 繪製x軸
// d3.axisBottom(x)使用上文定義的x比例尺返回一個面向底部的座標生成器
// 爲定義的g元素調用d3.axisBottom()函數，繪製x軸
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
// 設置刻度的大小
.tickSize(0)
// 設置刻度的內邊距
.tickPadding(6));
// 定義一個input元素，爲其綁定change事件監聽，用來切換 堆棧圖和簇狀圖
d3.selectAll("input")
.on("change", changed);
//定義一個定時器，在第一次執行完時停止。類似js的setTimeout()
var timeout = d3.timeout(function() {
d3.select("input[value=\"grouped\"]")
// D3中通過property在設置一些特殊的html元素的屬性
// 因此這裏的checked屬性通過property來設置
.property("checked", true)
// 爲input元素綁定一個自定義的事件change
.dispatch("change");
}, 2000);
// 切換堆棧圖和簇狀圖
function changed() {
// 停止當前定時器，防止後續的回調函數的執行
timeout.stop();
if (this.value === "grouped") transitionGrouped();
else transitionStacked();
}
// 切換爲簇狀圖
function transitionGrouped() {
// 定義y的定義域
y.domain([0, yMax]);
// 爲轉換爲簇狀圖添加過渡動畫
rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
// 計算每個矩形條柱的x位置
.attr("x", function(d, i) { return x(i) + x.bandwidth() / n * this.parentNode.__data__.key; })
// 設置矩形條柱的寬度，由於簇狀圖一組n個系列，因此計算矩形的寬度要除以n
.attr("width", x.bandwidth() / n)
.transition()
// 設置矩形條柱的y位置
.attr("y", function(d) { return y(d[1] - d[0]); })
// 設置矩形條柱的高度
.attr("height", function(d) { return y(0) - y(d[1] - d[0]); });
}
// 切換爲堆棧圖
function transitionStacked() {
// 切換y的定義域
y.domain([0, y1Max]);
// 爲轉換爲堆棧圖添加過渡動畫
rect.transition()
// 設置動畫的持續時長
.duration(500)
// 設置動畫的延遲時間
.delay(function(d, i) { return i * 10; })
// 設置矩形條柱的y位置
.attr("y", function(d) { return y(d[1]); })
// 設置矩形條柱的高度
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.transition()
// 設置動畫結束時矩形條需要達到的x的位置
.attr("x", function(d, i) { return x(i); })
// 設置動畫結束時矩形條需要達到的寬度
.attr("width", x.bandwidth());
}
// Returns an array of m psuedorandom, smoothly-varying non-negative numbers.
// Inspired by Lee Byron’s test data generator.
// http://leebyron.com/streamgraph/
// bumps(m)方法用來返回m個僞隨機數數組，而且數組中的數據是平滑變化的非負數
function bumps(m) {
var values = [], i, j, w, x, y, z;
// Initialize with uniform random values in [0.1, 0.2).
for (i = 0; i < m; ++i) {
values[i] = 0.1 + 0.1 * Math.random();
}
// Add five random bumps.
for (j = 0; j < 5; ++j) {
x = 1 / (0.1 + Math.random());
y = 2 * Math.random() - 0.5;
z = 10 / (0.1 + Math.random());
for (i = 0; i < m; i++) {
w = (i / m - y) * z;
values[i] += x * Math.exp(-w * w);
}
}
// Ensure all values are positive.
for (i = 0; i < m; ++i) {
values[i] = Math.max(0, values[i]);
}
return values;
}
</script>至此，堆棧圖和簇狀圖以及其相互換行解釋完畢，這裏比較難的是堆棧圖所需要的數據矩陣的轉換以及堆棧圖與簇狀圖切換時，矩形條柱的x,y位置以及寬度的計算。
今天室外陰冷，淅淅瀝瀝的小雨，出門寒氣逼人。