【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>



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>



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

	});



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>



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>




												


											
【D3.V3.js系列教程】--（十五）SVG基本图形绘制的更多相关文章
	

    
								
  1. 【D3.V3.js系列教程】--（十四）有路径的文字
		
    [D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...
    
		
    2. 
						
  2. 【D3.V3.js系列教程】--（十二）坐标尺度
		
    [D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales  ...
    
		
    3. 
						
  3. webpack4 系列教程(十五)：开发模式与webpack-dev-server
		
    作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十五):开发模式与 webpack-dev-server>原文地址.更欢迎来我的 ...
    
		
    4. 
						
  4. Unity3D脚本中文系列教程(十五)
		
    http://dong2008hong.blog.163.com/blog/static/4696882720140322449780/ Unity3D脚本中文系列教程(十四) ◆ LightRend ...
    
		
    5. 
						
  5. Spring Boot2 系列教程 (十五) | 服务端参数校验之一
		
    估计很多朋友都认为参数校验是客户端的职责,不关服务端的事.其实这是错误的,学过 Web 安全的都知道,客户端的验证只是第一道关卡.它的参数验证并不是安全的,一旦被有心人抓到可乘之机,他就可以有各种方法 ...
    
		
    6. 
						
  6. Spring Boot2 系列教程(十五)定义系统启动任务的两种方式
		
    在 Servlet/Jsp 项目中,如果涉及到系统任务,例如在项目启动阶段要做一些数据初始化操作,这些操作有一个共同的特点,只在项目启动时进行,以后都不再执行,这里,容易想到web基础中的三大组件(  ...
    
		
    7. 
						
  7. Unity3D脚本中文系列教程(十六)
		
    Unity3D脚本中文系列教程(十五) ◆ function OnPostprocessAudio (clip:AudioClip):void 描述:◆  function OnPostprocess ...
    
		
    8. 
						
  8. CRL快速开发框架系列教程十二(MongoDB支持)
		
    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
    
		
    9. 
						
  9. CRL快速开发框架系列教程十(导出对象结构)
		
    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Ext.getCmp()的简单使用
			
    Ext.getCmp(Ext组件ID),根据Ext组件的ID选择EXT组件. 例如:点击Panel->toolbar上的button改变Panel的标题 Ext.onReady(function ...
    
			
    2. 
						
  2. LeetCode_Interleaving String
			
    Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example, Given: s1 ...
    
			
    3. 
						
  3. WebSocket 简介
			
    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
    
			
    4. 
						
  4. WPF控件中可以用来记录数据用的属性总结
			
    今天遇到一个问题需要为每个控件tooltip根据不同情况显示多组数据,于是需要用到控件的某个属性暂存这个数据.好吧,现在我找到了3个属性可用,给自己做个备忘. 1.Tag 这个属性是object类型  ...
    
			
    5. 
						
  5. Roy the Robber
			
    Problem Description The aspiring Roy the Robber has seen a lot of American movies, and knows that th ...
    
			
    6. 
						
  6. UESTC_神秘绑架案 CDOJ 881
			
    神秘绑架案 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit Sta ...
    
			
    7. 
						
  7. distinct（） 去重复
			
    distinct 是对整个结果集进行数据重复抑制,而不是针对每一个列. select distinct FDepartment from T_Employee
    
			
    8. 
						
  8. 使用ASIHttoRequest需要导入的framework
			
    需要导入如下framework libxml2.2.dylib libz.1.2.5.dylib MobileCoreServices.framework SystemConfiguration.fr ...
    
			
    9. 
						
  9. 王立平-Android中对图像进行Base64编码
			
    // ------------------base64-------------------// public String bitmaptoString(Bitmap bitmap) { // 将B ...
    
			
    10. 
						
  10. linux C读取数据库
			
    上次我们已经共同学习了在Linux下C连接数据库,下面一起学习用C语言来操作数据库. 1,首先要打开mysql的服务 [root@bogon ~]# service mysqld statusmysq ...
    
			
    11.