【D3.V3.js系列教程】--（十五）SVG基本图形绘制

叁歲伎倆 2022-03-29 06:30 215阅读 0赞

# 【D3.V3.js系列教程】--（十五）SVG基本图形绘制 #

## 1、path ##

<!DOCTYPE html>
    <html>
      <head>
    		<meta charset="utf-8">
    		<title>testD3-13-path.html</title>
    		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
    	<style type="text/css">
    	</style>
    	</head>
    	<body>
    		<script type="text/javascript">
    	// 在 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
    	});
    		</script>
    
    	</body>
    </html>

![Center][]

## 2、折线 ##

<!DOCTYPE html>
    <html>
      <head>
    		<meta charset="utf-8">
    		<title>testD3-14-polyline.html</title>
    		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
    	<style type="text/css">
    	</style>
    	</head>
    	<body>
    		<script type="text/javascript">
    // 在 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
    	});
    		</script>
    
    	</body>
    </html>

![Center 1][]

## 3、多边形 ##

// 在 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
    	});

![Center 2][]

## 4、直线 ##

<!DOCTYPE html>
    <html>
      <head>
    		<meta charset="utf-8">
    		<title>testD3-16-line.html</title>
    		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
    	<style type="text/css">
    	</style>
    	</head>
    	<body>
    		<script type="text/javascript">
    // 在 body 中插入一個 svg
    	var svg = d3.select('body').append('svg');
    
    	// 在 svg 中插入 line
    	svg.append('line').attr({
    		x1: 40,
    		y1: 70,
    		x2: 250,
    		y2: 70
    	}).style({
    		stroke: 'black',
    		'stroke-width': 5
    	});
     
    	// 在 svg 中插入 line
    	svg.append('line').attr({
    		x1: 40,
    		y1: 140,
    		x2: 250,
    		y2: 140
    	}).style({
    		stroke: 'black',
    		'stroke-width': 5
    	});
     
    	// 在 svg 中插入 line
    	svg.append('line').attr({
    		x1: 100,
    		y1: 10,
    		x2: 100,
    		y2: 200
    	}).style({
    		stroke: 'black',
    		'stroke-width': 5
    	});
     
    	// 在 svg 中插入 line
    	svg.append('line').attr({
    		x1: 180,
    		y1: 10,
    		x2: 180,
    		y2: 200
    	}).style({
    		stroke: 'black',
    		'stroke-width': 5
    	});
     
    	// 在 svg 中插入 circle
    	svg.append('circle').attr({
    		cx: 140,
    		cy: 105,
    		r: 20
    	}).style({
    		fill: 'none',
    		stroke: 'red',
    		'stroke-width': 4
    	});
     
    	// 在 svg 中插入 line
    	svg.append('line').attr({
    		x1: 50,
    		y1: 20,
    		x2: 80,
    		y2: 50
    	}).style({
    		stroke: 'black',
    		'stroke-width': 5
    	});
     
    	// 在 svg 中插入 line
    	svg.append('line').attr({
    		x1: 80,
    		y1: 20,
    		x2: 50,
    		y2: 50
    	}).style({
    		stroke: 'black',
    		'stroke-width': 5
    	});
     
    	// 在 svg 中插入 circle
    	svg.append('circle').attr({
    		cx: 220,
    		cy: 180,
    		r: 20
    	}).style({
    		fill: 'none',
    		stroke: 'red',
    		'stroke-width': 4
    	});
    		</script>
    
    	</body>
    </html>

![Center 3][]

## 5、椭圆 ##

<!DOCTYPE html>
    <html>
      <head>
    		<meta charset="utf-8">
    		<title>testD3-17-eclipse.html</title>
    		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
    	<style type="text/css">
    	</style>
    	</head>
    	<body>
    		<script type="text/javascript">
    // 在 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
    	});
    		</script>
    
    	</body>
    </html>

![Center 4][]

[Center]: /images/20220329/41a9a57d3d8648f7b8d4c877a8224083.png
[Center 1]: /images/20220329/5a7be744d59942f0a7002a711d121427.png
[Center 2]: /images/20220329/117d8f05a71f4dd9909402a0a4ea0fd2.png
[Center 3]: /images/20220329/42ed25c4e2c441b3884654b76d33bc18.png
[Center 4]: /images/20220329/74011bb6e31d4249aa04aafe050fb042.png