【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. C语言IO操作总结
			
    C语言IO操作总结C程序将输入看做字节流,流的来源是文件.输入设备.或者另一程序的输入:C程序将输出也看做字节流:流的目的是文件.视频显示等: 文件处理:1 :fopen("filename ...
    
			
    2. 
						
  2. jQuery插件之jqzoom
			
    jqzoom是一款基于jQuery的图片方法插件. 使用方法:1.引入jQuery与jqzoom,jqzoom.css 2.准备两张一大一小大小相同的图片,小图片放在<img>标签的&qu ...
    
			
    3. 
						
  3. X windows的底层实现机制
			
    Qt在Linux上运行崩溃了,很可能的原因是对于X11机制的不了解.很可能是UI代码里面对窗口的操作不规范而导致Qt内部的BUG暴露出来.具体UI实现代码我也没有看.是别人维护的.打算今天去看下代码, ...
    
			
    4. 
						
  4. 数据类型MSVC和gcc/g++的不同
			
    前言: 在16位环境下,int/unsigned int 占16位,long/unsigned long占32位 在32位环境下,int占32位,unsigned int占16位,long/unsig ...
    
			
    5. 
						
  5. Ajax 缓存问题
			
    Ajax通过GET方式请求服务器数据,Microsoft Internet Explorer浏览器下,由于缓存问题,读取的数据非最新数据,解决问题方法如下: function getData(url, ...
    
			
    6. 
						
  6. ntp服务器池列表
			
    CentOS: 0.centos.pool.ntp.org 1.centos.pool.ntp.org 2.centos.pool.ntp.org 国内可用的 ntp.fudan.edu.cn 复旦  ...
    
			
    7. 
						
  7. python手记(44)
			
    #!/usr/bin/env python # -*- coding: utf-8 -*- #http://blog.csdn.net/myhaspl #code:myhaspl@qq.com imp ...
    
			
    8. 
						
  8. [Oracle] Data Guard 系列（5） - 创建逻辑备库
			
    在创建逻辑备库之前,必须得先创建物理备库,关于如何创建物理备库,请参考<Data Guard 系列(4) - 在不停主库的情况下创建物理备库>. 1. 在物理备库上停止日志应用服务 SYS ...
    
			
    9. 
						
  9. 04747_Java语言程序设计（一）_第2章_运算和语句
			
    推荐使用f2 public class Aserver { public static void main(String args[]) { float f1 = (float) 12.345; fl ...
    
			
    10. 
						
  10. SPOJ GCDEX (数论)
			
    转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents    by---cxlove 题意:求sigma (gcd (i , j))   ...
    
			
    11.