Home » D3 入門教學

[D3]用 D3.js 畫出 SVG 基本圖形 - 矩形 rect

[ 日期： | 瀏覽：11,107 | 迴響：搶沙發 ]

D3.js 是一個基於資料操作管理的 JavaScript Library。D3 使用標準的網頁技術，像是 SVG、HTML 及 CSS 來呈現各種資料，並加入各種事件驅動功能。

所以筆者接下來會介紹如何使用 D3 來畫出各種 SVG 的基本圖形。讓咱們先來看如果產生一個矩形囉：

檢視原始碼 JavaScript
1
2
3
4
5
6
7

$(function(){
	// 在 body 中插入一個 svg
	var svg = d3.select('body').append('svg');
 
	// 在 svg 中插入一個 rect
	svg.append('rect').attr('width', 200).attr('height', 100);
});

從程式來看，不難發現到 D3 的用法有點像是 jQuery，有些語法也幾乎是一樣的，像是 .append()、.attr() 等等，且它也支援鏈結的使用方式。

d3-draw-svg-shape-rect-1

其中像是 .attr() 也是支援 JSON 物件當做參數的用法，但在使用 jQuery 時，我們可以選擇把 key 進行 Camel Case 的轉換，但...在 D3 這麼做是沒有效果的。所以若是有屬性真的是有帶 - 的話，請把它用雙引號或單引號包起來吧！

接著讓我們來看如何加上各種 style 樣式吧：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

$(function(){
	// 在 body 中插入一個 svg
	var svg = d3.select('body').append('svg');
 
	// 在 svg 中插入 rect
	svg.append('rect').attr({
		width: 100, 
		height: 100,
		x: 10, 
		y: 10
	}).style({
		fill: 'steelblue',
		stroke: 'green',
		'stroke-width': 10
	});
 
	// 在 svg 中插入 rect
	svg.append('rect').attr({
		width: 50, 
		height: 50,
		x: 130, 
		y: 10
	}).style({
		fill: 'steelblue',
		stroke: 'green',
		'stroke-width': 10,
		'fill-opacity': .5
	});
 
	// 在 svg 中插入 rect
	svg.append('rect').attr({
		width: 50, 
		height: 50,
		x: 200, 
		y: 10,
		rx: 10, 
		ry: 10
	}).style({
		fill: 'steelblue',
		stroke: 'green',
		'stroke-width': 10,
		opacity: .5
	});
});

要特別注意的是，它的樣式設定是用 .style()，千萬不要搞混寫成 .css() 囉！

d3-draw-svg-shape-rect-2

rect 標籤的屬性及說明可以參考：SVG 基本圖形 - 矩形 rect

發表迴響