D3.js 作一個簡單的圖表（條形圖）

柱形圖是一種最簡單的可視化圖標，主要有矩形、文字標籤、座標軸組成。

本文爲簡單起見，只繪製矩形的部分，用以講解如何使用 D3 在 SVG 畫布中繪圖。

 

 

 

1、 畫布是什麼

　　前幾章的處理對象都是 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 格式保存圖像
    • 適合遊戲應用

 

 

2、添加畫布

　　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);    //設定高度

　　 有了畫布，接下來就能夠在畫布上做圖了。

 

 

3、繪製矩形

　　繪製一個橫向的柱形圖。只繪製矩形，不繪製文字和座標軸。

　　在 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 的形式，方便歸類和修改。