轉載請註明出處，謝謝。

    前面說了幾節，都是對文字進行處理，這一節中將用 D3.js 做一個簡單的柱形圖。

    做柱形圖有很多種方法，比如用 HTML 的 div 標籤，或用 svg 。

    推薦用 SVG 來做各種圖形。SVG 意為可縮放向量圖形（Scalable Vector Graphics），SVG 使用 XML 格式定義影象，不清楚什麼是SVG的朋友請先在 w3cschools 學習下，內容很少，很快就能掌握，不需要記住各種標籤，只要知道大概是什麼就行，用的時候再查。

    先看下面的程式碼：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
<script>	
		var width = 600;
		var height = 600;
		var svg = d3.select("body").append("svg")
					   .attr("width",width)
					   .attr("height",height);
		
		var dataset = [ 30 , 20 , 45 , 12 , 21 ];
		
		svg.selectAll("rect")
		   .data(dataset)
		   .enter()
		   .append("rect")
		   .attr("x",10)
		   .attr("y",function(d,i){
				return i * 30;
		   })
		   .attr("width",function(d,i){
				return d * 10;
		   })
		   .attr("height",28)
		   .attr("fill","red");
		   
</script>
 

    上面程式碼的結果如下圖：

    這樣就做了一個柱形圖。分析一下上面的程式碼：

    第3-4行： 定義兩個變數，分別表示 SVG 繪製領域的寬和高。

    第5-7行： 表示選擇 body 後，在 body 裡插入 svg ，用 attr 來給 svg 新增屬性。用 attr 新增屬性的效果類似於在 HTML 中給<a>元素新增屬性 href 。

    第9行： 是要使用的資料。

    第11行： 表示在 svg 中選擇所有的 rect 元素，但是實際上這時候 svg 中還不存在 rect 元素。這是 D3 一個比較特殊的地方，即它能夠選擇一個空集

    第12行： 表示將資料繫結要這個 svg 上。

    第13行： enter 表示當所需要的元素（這裡為 rect ）比繫結的資料集合的元素（這裡為 dataset ）少時，自動新增位置，使得與資料集合的數量一樣多。這裡很重要。

    第14行： 緊接上一行， append 元素 rect 。11-14行經常一起出現，要注意。

    第15-27行： 設定 rect 元素的各項屬性，如位置，長短，顏色等。

    上面的柱形圖，對於每個柱柱都是手動設定的長度，實際運用中我們常常希望給定一個最大值，讓柱柱自動根據這個最大值調整百分比，顯示出來，怎麼辦呢？插入如下程式碼：

var wx = d3.scale.linear()
		        .domain([0,d3.max(dataset)])
                .range([0,500]);

    d3.scale.linear() 用於生成一個線性的可縮放的尺度，它的初始 domain 為 [ 0 , 1 ] ，初始 range 為 [ 0 , 1 ] ， 這裡的[ ]表示的是範圍。 現在我們把 domain 設定為 [ 0 , d3.max(dataset) ] ，即0到 dataset 中的最大值。 range設定為0到500。 這表示如果資料是45，則返回500，如果是30，則返回333.333。

    接下來只要在新增 rect 時給width屬性賦值的時候換成變數 wx 即可。

svg.selectAll("rect")
		   .data(dataset)
		   .enter()
		   .append("rect")
		   .attr("x",10)
		   .attr("y",function(d,i){
				return i * 30;
		   })
		   .attr("width",wx)           //注意這裡
		   .attr("height",28)
		   .attr("fill","red");