D3.js：完整的柱形圖

　　一個完整的柱形圖包含三部分：矩形、文字、座標軸。本章將對前幾章的內容進行綜合的運用，製做一個實用的柱形圖，內容包括：選擇集、數據綁定、比例尺、座標軸等內容。

(1) 添加SVG畫布

//畫布大小
var width = 400; var height = 400; //在 body 裏添加一個 SVG 畫布 
var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); //畫布周邊的空白
 var padding = {left:30, right:30, top:20, bottom:20};

(2) 定義數據和比例尺

// 定義一個數組
var dataset = [10, 20, 30, 40, 33, 24, 12, 5]; // x軸的比例尺
var xScale = d3.scale.ordinal() .domain(d3.range(dataset.length)) .rangeRoundBands([0, width-padding.left - padding.right]); // y軸的比例尺
var yScale = d3.scale.linear() .domain([0, d3.max(dataset)]) .range([height - padding.top - padding.bottom, 0]);

(3) 定義座標軸

// 定義x軸
var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); // 定義y軸
var yAxis = d3.svg.axis() .scale(yScale) .orient("left");

(4) 添加矩形和文字元素

// 矩形之間的空白
var rectPadding = 4; // 添加矩形元素
var rects = svg.selectAll(".MyRect") .data(dataset) .enter() .append("rect") .attr("class","MyRect") .attr("transform","translate("+ padding.left + "," + padding.top + ")") .attr("x",function(d, i){ return xScale(i) + rectPadding/2;
 }) .attr("y",function(d){ return yScale(d); }) .attr("width", xScale.rangeBand() - rectPadding) .attr("height", function(d){ return height - padding.top - padding.bottom - yScale(d); }); // 添加文字元素
var texts = svg.selectAll(".MyText") .data(dataset) .enter() .append("text") .attr("class","MyText") .attr("transform","translate(" + padding.left + "," + padding.top + ")") .attr("x", function(d, i){ return xScale(i) + rectPadding/2;
 }) .attr("y", function(d){ return yScale(d); }) .attr("dx", function(){ return (xScale.rangeBind() - rectPadding)/2;
 }) .attr("dy", function(d){ return 20; }) .text(function(d){ return d; })

(5) 添加座標軸的元素

// 添加x軸
svg.append("g") .attr("class","axis") .attr("transform","translate("+ padding.left + "," +(height-padding.bottom)+")") .call(xAxis); // 添加y軸
svg.append("g") .attr("class","axis") .attr("transform","translate("+ padding.left + "," + padding.top + ")") .call(yAxis);

頁面效果: