柱形圖是一種最簡單的可視化圖標，主要有矩形、文字標簽、坐標軸組成。
本文為簡單起見，只繪制矩形的部分，用以講解如何使用 D3 在 SVG 畫布中繪圖。
一、 畫布是什么
前幾章的處理對象都是 HTML 的文字，沒有涉及圖形的制作。
要繪圖，首要需要的是一塊繪圖的“畫布”。
HTML 5 提供兩種強有力的“畫布”：SVG 和 Canvas。
1.1. SVG 是什么
SVG，指可縮放矢量圖形（Scalable Vector Graphics），是用於描述二維矢量圖形的一種圖形格式，是由萬維網聯盟制定的開放標准。
SVG 使用 XML 格式來定義圖形，除了 IE8 之前的版本外，絕大部分瀏覽器都支持 SVG，可將 SVG 文本直接嵌入 HTML 中顯示。
SVG 有如下特點：
-
-
- SVG 繪制的是矢量圖，因此對圖像進行放大不會失真。
- 基於 XML，可以為每個元素添加 JavaScript 事件處理器。
- 每個圖形均視為對象，更改對象的屬性，圖形也會改變。
- 不適合游戲應用。
-
1.2. Canvas 是什么
Canvas 是通過 JavaScript 來繪制 2D 圖形，是 HTML 5 中新增的元素。
Canvas 有如下特點：
-
-
- 繪制的是位圖，圖像放大后會失真。
- 不支持事件處理器。
- 能夠以 .png 或 .jpg 格式保存圖像
- 適合游戲應用
-
二、添加畫布
D3 雖然沒有明文規定一定要在 SVG 中繪圖，但是 D3 提供了眾多的 SVG 圖形的生成器，它們都是只支持 SVG 的。因此，建議使用 SVG 畫布。
使用 D3 在 body 元素中添加 svg 的代碼如下。
var width = 300; //畫布的寬度 var height = 300; //畫布的高度 var svg = d3.select("body") //選擇文檔中的body元素 .append("svg") //添加一個svg元素 .attr("width", width) //設定寬度 .attr("height", height); //設定高度
有了畫布，接下來就可以在畫布上作圖了。
三、繪制矩形
繪制一個橫向的柱形圖。只繪制矩形，不繪制文字和坐標軸。
在 SVG 中，矩形的元素標簽是 rect。例如：
<svg> <rect></rect> <rect></rect> </svg>
上面的 rect 里沒有矩形的屬性。矩形的屬性，常用的有四個：
-
- x：矩形左上角的 x 坐標
- y：矩形左上角的 y 坐標
- width：矩形的寬度
- height：矩形的高度
要注意，在 SVG 中，x 軸的正方向是水平向右，y 軸的正方向是垂直向下的（設置元素的位置）。
現在給出一組數據，要對此進行可視化。數據如下：
var dataset = [ 250 , 210 , 170 , 130 , 90 ]; //數據（表示矩形的寬度）
為簡單起見，我們直接用數值的大小來表示矩形的像素寬度（后面會說到這不是一種好方法）。然后，添加以下代碼。
var rectHeight = 25; //每個矩形所占的像素高度(包括空白) svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x",20) .attr("y",function(d,i){ return i * rectHeight; }) .attr("width",function(d){ return d; }) .attr("height",rectHeight-2) .attr("fill","steelblue");
這段代碼添加了與 dataset 數組的長度相同數量的矩形，所使用的語句是：
svg.selectAll("rect") //選擇svg內所有的矩形
.data(dataset) //綁定數組
.enter() //指定選擇集的enter部分
.append("rect") //添加足夠數量的矩形元素
這段代碼以后會常常出現在 D3 的代碼中，請務必牢記。目前不深入討論它的作用機制是怎樣的，只需要讀者牢記，當
有數據，而沒有足夠圖形元素的時候，使用此方法可以添加足夠的元素。
添加了元素之后，就需要分別給各元素的屬性賦值。在這里用到了 function(d, i)，前面已經講過，d 代表與當前元素綁定的數據，i 代表索引號。給屬性賦值的時候，是需要用到被綁定的數據，以及索引號的。
最后一行的：
.attr("fill","steelblue");
是給矩形元素設置顏色。一般來說，最好寫成外置 CSS 的形式，方便歸類和修改。