前面幾節講解了圖標、坐標軸、比例等等，這一節整合這些內容做一個實用的圖表。結果圖如下：
代碼如下所示：
<html>
<head>
<meta charset="utf-8">
<title>Chart</title>
</head>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 600;
var height = 600;
var dataset = [];
var num = 15; //數組的數量
for(var i = 0; i < num ; i++){
var tempnum = Math.floor( Math.random() * 50 ); // 返回 0~49 整數
dataset.push(tempnum);
}
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
var xAxisScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0,500]);
var yAxisScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([500,0]);
var xAxis = d3.svg.axis()
.scale(xAxisScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yAxisScale)
.orient("left");
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0,500],0.05);
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([0,500]);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d,i){
return 30 + xScale(i);
} )
.attr("y",function(d,i){
return 50 + 500 - yScale(d) ;
})
.attr("width", function(d,i){
return xScale.rangeBand();
})
.attr("height",yScale)
.attr("fill","red");
svg.selectAll("text")
.data(dataset)
.enter().append("text")
.attr("x", function(d,i){
return 30 + xScale(i);
} )
.attr("y",function(d,i){
return 50 + 500 - yScale(d) ;
})
.attr("dx", function(d,i){
return xScale.rangeBand()/3;
})
.attr("dy", 15)
.attr("text-anchor", "begin")
.attr("font-size", 14)
.attr("fill","white")
.text(function(d,i){
return d;
});
svg.append("g")
.attr("class","axis")
.attr("transform","translate(30,550)")
.call(xAxis);
svg.append("g")
.attr("class","axis")
.attr("transform","translate(30,50)")
.call(yAxis);
</script>
</body>
</html>
下面分別講解上面的代碼：
- 31 - 34 行： 隨機生成數據，賦於數組
- 36 - 38 行： 定義 svg
- 40 - 54 行： 定義坐標軸的 scale （比例）和坐標軸，48行為 x 軸，52行為 y 軸
- 56 - 62 行： 定義柱形圖的 scale
- 64 - 78 行： 繪制柱形圖，注意 scale 的使用
- 80 - 98 行： 繪制文字標簽，同樣注意 scale
- 100 - 108 行： 繪制坐標軸
注意：繪制的時候，要注意繪制的順序，否則可能會把某些需要的東西覆蓋掉。尤其是坐標軸，最好放到最后繪制。