【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. 浅谈HashMap的实现原理
			
    1.    HashMap概述: HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒久不变 ...
    
			
    2. 
						
  2. Primo Ramdisk配置教程
			
    首先感谢xiaohu在太平洋电脑网上发表的“将内存当硬盘用!Primo Ramdisk图文教程”,本文主要是将其图文整理了一下,以方便以后使用. 原文地址:http://fashion.pconlin ...
    
			
    3. 
						
  3. 查看oracle中的中文所占字节数
			
    select userenv('language') from dual 显示:SIMPLIFIED CHINESE_CHINA.ZHS16GBK 表示一个汉字占用两个字节. 显示:SIMPLIFIE ...
    
			
    4. 
						
  4. X windows的底层实现机制
			
    Qt在Linux上运行崩溃了,很可能的原因是对于X11机制的不了解.很可能是UI代码里面对窗口的操作不规范而导致Qt内部的BUG暴露出来.具体UI实现代码我也没有看.是别人维护的.打算今天去看下代码, ...
    
			
    5. 
						
  5. android 签名被篡改(Keystore was tampered with, or password was incorrect)
			
    在配置自定义签名时出现了"Keystore was tampered with, or password was incorrect"错误! 参考文档发现: If necessar ...
    
			
    6. 
						
  6. UESTC_秋实大哥与家 2015 UESTC Training for Data Structures<Problem E>
			
    E - 秋实大哥与家 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submi ...
    
			
    7. 
						
  7. 剑指offer-面试题11.数值的整数次方
			
    题目:实现函数double Power(double base,int exponent),求base的 exponent次方.不得使用库函数,同时不需要考虑大数的问题. 这道题看似很简单: 然而需要 ...
    
			
    8. 
						
  8. poj 3678 Katu Puzzle(2-sat)
			
    Description Katu Puzzle ≤ c ≤ ). One Katu ≤ Xi ≤ ) such that for each edge e(a, b) labeled by op and ...
    
			
    9. 
						
  9. 事关Animation Tree的工作随笔（一）
			
    最近的业务上,又回到Animation Tree这块了. 众所周知的是Animation Tree这些概念已经提出很久了,但是使用有着AT支持的CE引擎的项目,却依然义无反顾地没有使用AT,而且,连某 ...
    
			
    10. 
						
  10. [生成树][Uva1395][Slim Span]
			
    代码: #include <set> #include <queue> #include <cmath> #include <cstdio> #incl ...
    
			
    11.