Home » D3 入門教學

[D3]用 D3.js 畫出 SVG 基本圖形 - 路徑 path

[ 日期： | 瀏覽：8,723 | 迴響：搶沙發 ]

在 SVG 中加入路徑的方式是透過指定 path 標籤的 d 屬性來達成，同樣在 D3 中也是一樣。

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

$(function(){
	// 在 body 中插入一個 svg
	var svg = d3.select('body').append('svg');
 
	// 在 svg 中插入一個 path
	svg.append('path').attr('d', 'M50 150H200C150 0 450 0 400 150H550').style('fill', 'none').style('stroke', 'purple').style('stroke-width', 2);
});

d3-draw-svg-shape-path-1

使用路徑來繪制是一件需要天份的事 XD：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
	// 在 body 中插入一個 svg
	var svg = d3.select('body').append('svg');
 
	// 在 svg 中插入一個 path
	svg.append('path').attr({
		d: 'M50 150Q300 50 300 150T450 150'
	}).style({
		fill: 'none', 
		stroke: 'purple',
		'stroke-width': 5
	});
});

d3-draw-svg-shape-path-2

path 標籤的屬性及說明可以參考：SVG 基本圖形 - 路徑 path

發表迴響