Home » D3 入門教學

[D3]用 D3.js 畫出 SVG 基本圖形 - 圓形 circle

[ 日期： | 瀏覽：9,111 | 迴響：搶沙發 ]

使用 D3 畫個圓形也是一樣只要插入 circle 標籤就可以了。

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

$(function(){
	// 在 body 中插入一個 svg
	var svg = d3.select('body').append('svg');
 
	// 在 svg 中插入一個 circle
	svg.append('circle').attr('cx', 60).attr('cy', 60).attr('r', 50);
});

d3-draw-svg-shape-circle-1

接著讓我們多插入幾個圓形及自訂不同的樣式：

檢視原始碼 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

$(function(){
	// 在 body 中插入一個 svg
	var svg = d3.select('body').append('svg');
 
	// 在 svg 中插入 circle
	svg.append('circle').attr({
		cx: 60,
		cy: 60, 
		r: 50
	}).style({
		fill: 'steelblue',
		stroke: 'green', 
		'stroke-width': 10
	});
 
	// 在 svg 中插入 circle
	svg.append('circle').attr({
		cx: 160,
		cy: 60, 
		r: 20
	}).style({
		fill: 'steelblue',
		stroke: 'green', 
		'stroke-width': 10,
		'fill-opacity': .5
	});
 
	// 在 svg 中插入 circle
	svg.append('circle').attr({
		cx: 210,
		cy: 60, 
		r: 10
	}).style({
		fill: 'steelblue',
		stroke: 'green', 
		'stroke-width': 5, 
		opacity: .5
	});
});

d3-draw-svg-shape-circle-2

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

發表迴響