Home » D3 入門教學

[D3]用 D3.js 畫出 SVG 基本圖形 - 折線 polyline

[ 日期： | 瀏覽：6,337 | 迴響：搶沙發 ]

直線跟多邊形的基本屬性只有 points，所以透過 D3 來插入 polyline 標籤也是沒什麼困難的事。

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

$(function(){
	// 在 body 中插入一個 svg
	var svg = d3.select('body').append('svg');
 
	// 在 svg 中插入一個 polyline
	svg.append('polyline').attr('points', '10,10 60,60 110,10 160,80, 230,30').style('fill', 'none').style('stroke', 'red').style('stroke-width', 5);
});

d3-draw-svg-shape-polyline-1

用直線也能組合出各種基本圖形的：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(function(){
	// 在 body 中插入一個 svg
	var svg = d3.select('body').append('svg');
 
	// 在 svg 中插入 polyline
	svg.append('polyline').attr({
		points: '100,10 40,180 190,60 10,60 160,180 100,10'
	}).style({
		fill: 'black', 
		stroke: 'green',
		'stroke-width': 4
	});
 
	// 在 svg 中插入 polyline
	svg.append('polyline').attr({
		points: '200,160 240,160 240,120 280,120 280,80 320,80 320,40 360,40 360,160 240,160'
	}).style({
		fill: 'none', 
		stroke: 'green',
		'stroke-width': 4
	});
});

d3-draw-svg-shape-polyline-2

polyline 標籤的屬性及說明可以參考：SVG 基本圖形 - 折線 polyline

發表迴響