【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. Bitmap 与ImageSource之间的转换
			
    public class ImageConverter { [DllImport("gdi32.dll", SetLastError = true)] private static ...
    
			
    2. 
						
  2. windows bat脚本编写
			
    windows批处理 (cmd/bat) 编程详解 开始之前先简单说明下cmd文件和bat文件的区别:在本质上两者没有区别,都是简单的文本编码方式,都可以用记事本创建.编辑和查看.两者所用的命令行代码 ...
    
			
    3. 
						
  3. JDBC的使用——Statement
			
    JDBC是Java最基本的数据库操作途径,虽然现在有了更高端的Hibernate和JPA,但是其实它们的底层还是用的这些最基本的JDBC.而且,如果开发一个小型的应用程序,使用Hibernate不免有 ...
    
			
    4. 
						
  4. bzoj1632 [Usaco2007 Feb]Lilypad Pond
			
    Description Farmer John 建造了一个美丽的池塘,用于让他的牛们审美和锻炼.这个长方形的池子被分割成了 M 行和 N 列( 1 ≤ M ≤ 30 ; 1 ≤ N ≤ 30 ) 正方 ...
    
			
    5. 
						
  5. [每日一题] 11gOCP 1z0-052 :2013-09-25 Lock ――for update.................................C23
			
    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/12021587 正确答案:ABE 这道题需要我们了解锁的知识点. TM锁的模式: 0-Non ...
    
			
    6. 
						
  6. [置顶] Jquery发展
			
    jQuery在2006年1月由美国人JohnResig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由DaveMethvin率领团队进行开发.是继prototype ...
    
			
    7. 
						
  7. Socket 相关的知识
			
    1.关于PF_INET和AF_INET的区别 在写网络程序的时候,建立TCP socket: sock = socket(PF_INET, SOCK_STREAM, 0);然后在绑定本地地址或连接远程 ...
    
			
    8. 
						
  8. Unity 制作RPG地图2(自己控制地图上图标)
			
    上一次用Unity摄像机方式实现了地图的制作,现在介绍另一种实现地图的方式: 自己通过代码实现小地图NCP图标的显示和隐藏 制作地图的步骤: 1. 根据游戏人物的3D坐标转换成2D平面坐标,根据距离显 ...
    
			
    9. 
						
  9. IOS百度地图语音导航
			
    VoiceNavigationViewController.m * 客户端需安装百度导航地图 #import "VoiceNavigationViewController.h" # ...
    
			
    10. 
						
  10. telnet查看memcached运行参数说明
			
    在Linux/Windows系统中启动memcached的命令请查看http://weilingfeng98.iteye.com/admin/blogs/1741179 启动完memcached服务器 ...
    
			
    11.