D3.js 入門系列2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="svg"></div> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> const datasetView Code=[50,43,120,87,99,167,142]; const height=400; const width=400; const svg=d3.select("#svg").append("svg") .attr("height",height) .attr("width",width) const padding={top:20,left:20,right:20,bottom:20}; const rectStep=35; const rectWith=30; svg.selectAll("rect").data(dataset).enter().append("rect").attr("fill","red") .attr("x",function(d,i){return padding.left+i*rectStep}) .attr("y",function (d,i) {return height-padding.bottom-d}) .attr("width",rectWith).attr("height",function (d,i) {return d}); const text=svg.selectAll("text").data(dataset).enter().append("text").attr("fill","#fff") .attr("font-size","14px").attr("text-anchor","middle") .attr("x",function(d,i){return padding.left+i*rectStep}) .attr("y",function (d,i) {return height-padding.bottom-d}) .text(function (d,i) { return d }) .attr("dx",rectWith/2) .attr("dy","1em"); </script> </body> </html>
第五章 做一個簡單的圖表
柱形圖是一種最簡單的視覺化圖示，主要有矩形、文字標籤、座標軸組成。本文為簡單起見，只繪製矩形的部分，用以講解如何使用 D3 在 SVG 畫布中繪圖。
畫布是什麼
前幾章的處理物件都是 HTML 的文字，沒有涉及圖形的製作。
要繪圖，首要需要的是一塊繪圖的“畫布”。
HTML 5 提供兩種強有力的“畫布”：SVG 和 Canvas。
SVG 是什麼
SVG，指可縮放向量圖形（Scalable Vector Graphics），是用於描述二維向量圖形的一種圖形格式，是由全球資訊網聯盟制定的開放標準。 SVG 使用 XML 格式來定義圖形，除了 IE8 之前的版本外，絕大部分瀏覽器都支援 SVG，可將 SVG 文字直接嵌入 HTML 中顯示。
SVG 有如下特點：
- SVG 繪製的是向量圖，因此對影象進行放大不會失真。
- 基於 XML，可以為每個元素新增 JavaScript 事件處理器。
- 每個圖形均視為物件，更改物件的屬性，圖形也會改變。
- 不適合遊戲應用。
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 的形式，方便歸類和修改。這裡為了便於初學者理解，將樣式直接寫到元素裡。
結果圖如本文開頭的圖片所示。