Home » D3 入門教學

[D3]用 D3.js 畫出 SVG 基本圖形 - 多邊形 polygon

[ 日期： | 瀏覽：7,626 | 迴響：搶沙發 ]

因為多邊形的基本屬性只有 points，所以透過 D3 來插入 polygon 標籤就更簡單。

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

$(function(){
	// 在 body 中插入一個 svg
	var svg = d3.select('body').append('svg');
 
	// 在 svg 中插入一個 polygon
	svg.append('polygon').attr('points', '310,10 30,110 120,300 320,150');
});

d3-draw-svg-shape-polygon-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

$(function(){
	// 在 body 中插入一個 svg
	var svg = d3.select('body').append('svg');
 
	// 在 svg 中插入 polygon
	svg.append('polygon').attr({
		points: '50,10 20,50 80,50'
	}).style({
		fill: 'none', 
		stroke: '#f0f',
		'stroke-width': 4
	});
 
	// 在 svg 中插入 polygon
	svg.append('polygon').attr({
		points: '70,10 130,10 100,50 '
	}).style({
		fill: 'none', 
		stroke: '#520',
		'stroke-width': 4
	});
 
	// 在 svg 中插入 polygon
	svg.append('polygon').attr({
		points: '150,10 120,50 180,50'
	}).style({
		fill: 'none', 
		stroke: '#f0f',
		'stroke-width': 4
	});
});

d3-draw-svg-shape-polygon-2

polygon 標籤的屬性及說明可以參考：SVG 基本圖形 - 多邊形 polygon

發表迴響