SVG，指可縮放矢量圖形（Scalable Vector Graphics），是用于描述二維矢量圖形的一種圖形格式，是由萬維網聯(lián)盟制定的開放標準。 SVG 使用 XML 格式來定義圖形，除了 IE8 之前的版本外，絕大部分瀏覽器都支持 SVG，可將 SVG 文本直接嵌入 HTML 中顯示。

SVG 有如下特點：

SVG 繪制的是矢量圖，因此對圖像進行放大不會失真。
基于 XML，可以為每個元素添加 JavaScript 事件處理器。
每個圖形均視為對象，更改對象的屬性，圖形也會改變。
不適合游戲應用。

Canvas 是什么

Canvas 是通過 JavaScript 來繪制 2D 圖形，是 HTML 5 中新增的元素。

Canvas 有如下特點：

繪制的是位圖，圖像放大后會失真。
不支持事件處理器。
能夠以 .png 或 .jpg 格式保存圖像
適合游戲應用

添加畫布

D3 雖然沒有明文規(guī)定一定要在 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 軸的正方向是垂直向下的。

現(xiàn)在給出一組數(shù)據(jù)，要對此進行可視化。數(shù)據(jù)如下：

var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //數(shù)據(jù)（表示矩形的寬度）

為簡單起見，我們直接用數(shù)值的大小來表示矩形的像素寬度（后面會說到這不是一種好方法）。然后，添加以下代碼。

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 數(shù)組的長度相同數(shù)量的矩形，所使用的語句是：

svg.selectAll("rect")   //選擇svg內所有的矩形
    .data(dataset)  //綁定數(shù)組
    .enter()        //指定選擇集的enter部分
    .append("rect") //添加足夠數(shù)量的矩形元素

這段代碼以后會常常出現(xiàn)在 D3 的代碼中，請務必牢記。目前不深入討論它的作用機制是怎樣的，只需要讀者牢記，當：

有數(shù)據(jù)，而沒有足夠圖形元素的時候，使用此方法可以添加足夠的元素。

添加了元素之后，就需要分別給各元素的屬性賦值。在這里用到了 function(d, i)，前面已經講過，d 代表與當前元素綁定的數(shù)據(jù)，i 代表索引號。給屬性賦值的時候，是需要用到被綁定的數(shù)據(jù)，以及索引號的。

最后一行的：

.attr("fill","steelblue");

是給矩形元素設置顏色。一般來說，最好寫成外置 CSS 的形式，方便歸類和修改。這里為了便于初學者理解，將樣式直接寫到元素里。

結果圖如本文開頭的圖片所示。

源代碼

下載地址：rm30.zip

展示地址：http://www.ourd3js.com/demo/rm/R-3.0/MakeChart.html

上一篇：第二章第一個程序 HelloWorld下一篇：第十六章中國地圖

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

第五章 做一個簡單的圖表

畫布是什么

SVG 是什么

Canvas 是什么

添加畫布

繪制矩形

源代碼

第五章做一個簡單的圖表