【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. 折腾gnome3.4
			
    1.平埔式窗口管理器shellshape 刚开始用都是登录时默认为gnome classic,主要是希望有任务栏,但是为了在这种模式,gnome扩展都没有用了. 而我又在使用shellshape -- ...
    
			
    2. 
						
  2. C# 调用 Web Service
			
    Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立的通讯技术.是:通过SOAP ...
    
			
    3. 
						
  3. UESTC_邱老师降临小行星 2015 UESTC Training for Search Algorithm & String<Problem B>
			
    B - 邱老师降临小行星 Time Limit: 10000/5000MS (Java/Others)     Memory Limit: 65536/65535KB (Java/Others) Su ...
    
			
    4. 
						
  4. 为什么和其他语言相比C语言是快速的语言
			
    初入门的我们经常听见别人说"真正的程序员用C语言编程,C是最快的语言因为它是最靠近及其底层的语言."那么和其他语言相比C语言到底有什么特别的呢? C语言没有什么特别,这就是它快速的 ...
    
			
    5. 
						
  5. PHP安装和配置
			
    编译安装php5-5.2.6-49.11.src.rpm: ./configure --prefix=/usr/local/php --with-apxs2=/usr/local/apache/bin ...
    
			
    6. 
						
  6. 安装配置MongoDB数据库
			
    一.关闭SElinux.配置防火墙 1.vi /etc/selinux/config #SELINUX=enforcing #注释掉 #SELINUXTYPE=targeted #注释掉 SELINU ...
    
			
    7. 
						
  7. Unity 制作RPG地图2(自己控制地图上图标)
			
    上一次用Unity摄像机方式实现了地图的制作,现在介绍另一种实现地图的方式: 自己通过代码实现小地图NCP图标的显示和隐藏 制作地图的步骤: 1. 根据游戏人物的3D坐标转换成2D平面坐标,根据距离显 ...
    
			
    8. 
						
  8. AS3聊天单行输入框图文混排完美实现
			
    几年前刚毕业.第一个游戏模块做的就是聊天.到如今.几个游戏写过几次聊天模块. 之前在4399做的<幻龙骑士>(又名<神骑士>),还有上周六刚上线的<疯狂的子弹>,  ...
    
			
    9. 
						
  9. sqlplus常用操作命令（转）
			
    SQL*PLUS 是Oracle提供的一个工具程序,它不仅可以用于测试,运行SQL语句和PL/SQL块,而且还可以用于管理Oracle数据库  1.启动sql*plus 为了使用sql*plus,必须 ...
    
			
    10. 
						
  10. winform  —— 界面
			
    winform 界面简单介绍 窗体事件:理解为委托变量,指向哪个函数,就执行哪个函数.窗体:显示窗体的过程是一个通过模板造对象的过程.先走构造函数,构造函数中的InitializeComponent( ...
    
			
    11.