Home » D3 入門教學

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

[ 日期： | 瀏覽：3,990 | 迴響：搶沙發 ]

接著再使用 D3 插入 ellipse 標籤來畫個橢圓形吧。

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

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

d3-draw-d3-shape-ellipse-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
40
41
42

$(function(){
	// 在 body 中插入一個 svg
	var svg = d3.select('body').append('svg');
 
	// 在 svg 中插入 ellipse
	svg.append('ellipse').attr({
		cx: 100,
		cy: 60, 
		rx: 30, 
		ry: 50
	}).style({
		fill: 'pink', 
		stroke: 'green', 
		'stroke-width': 10
	});
 
	// 在 svg 中插入 ellipse
	svg.append('ellipse').attr({
		cx: 200,
		cy: 60, 
		rx: 30, 
		ry: 50
	}).style({
		fill: 'pink', 
		stroke: 'green', 
		'stroke-width': 10,
		'fill-opacity': .6
	});
 
	// 在 svg 中插入 ellipse
	svg.append('ellipse').attr({
		cx: 145,
		cy: 180, 
		rx: 110, 
		ry: 40
	}).style({
		fill: 'pink', 
		stroke: 'green', 
		'stroke-width': 5,
		opacity: .6
	});
});

d3-draw-d3-shape-ellipse-2

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

發表迴響