【D3.V3.js系列教程】--（十四）有路径的文字

1、 在 svg 中插入一個 text

// 在 body 中插入一個 svg

var svg = d3.select('body').append('svg');

 


// 在 svg 中插入一個 text


svg.append('text')


.attr('x', 10)


.attr('y', 20)


.style('fill', 'steelblue')


.style('font-size', '24px')


.style('font-weight', 'bold')


.text('.text加入文字测试！');

2、添加文字路径

 // 先在 svg 中插入一個 path


svg.append('path').attr({


id: 'mypath',


d: 'M50 100Q350 50 350 250Q250 50 50 250'


}).style({


fill: 'none',


stroke: 'green',


'stroke-width': 10


});


.append('textPath').attr({//引用路径


'xlink:href': '#mypath'


})

3、源码

<!DOCTYPE html>

<html>

  <head>

		<meta charset="utf-8">

		<title>testD3-12-text.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({

		id: 'mypath',

		d: 'M50 100Q350 50 350 250Q250 50 50 250'

	}).style({

		fill: 'none',

		stroke: 'green',

		'stroke-width': 10

	});

	// 在 svg 中插入一個 text

	svg.append('text')

	.attr('x', 10)

	.attr('y', 20)

	.style('fill', 'steelblue')

	.style('font-size', '24px')

	.style('font-weight', 'bold')

	.append('textPath').attr({//引用路径

		'xlink:href': '#mypath'

	})

	.text('.text加入文字测试！并用xlink:href: #mypath加入了路径');

		</script>

	</body>

</html>

4、效果



【D3.V3.js系列教程】--（十四）有路径的文字的更多相关文章

  1. 【D3.V3.js系列教程】--（十五）SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  2. 【D3.V3.js系列教程】--（十二）坐标尺度

    [D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales ...

  3. webpack4 系列教程(十四)：Clean Plugin and Watch Mode

    作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十四):Clean Plugin and Watch Mode>原文地址.更欢迎 ...

  4. Unity3D脚本中文系列教程(十四)

    http://dong2008hong.blog.163.com/blog/static/469688272014032134394/ WWWFrom 类Unity3D脚本中文系列教程(十三)辅助类. ...

  5. Spring Boot2 系列教程 (十四) | 统一异常处理

    如题,今天介绍 SpringBoot 是如何统一处理全局异常的.SpringBoot 中的全局异常处理主要起作用的两个注解是 @ControllerAdvice 和 @ExceptionHandler ...

  6. Spring Boot2 系列教程(十四)CORS 解决跨域问题

    今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由 Netsca ...

  7. Spring Boot系列教程十四：Spring boot同时支持HTTP和HTTPS

    自签证书 openssl生成服务端证书,不使用CA证书直接生成 -in server.csr -signkey server.key -out server.crt # 5.server证书转换成ke ...

  8. Unity3D脚本中文系列教程(十五)

    http://dong2008hong.blog.163.com/blog/static/4696882720140322449780/ Unity3D脚本中文系列教程(十四) ◆ LightRend ...

  9. CRL快速开发框架系列教程十二(MongoDB支持)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

随机推荐

  1. IE6 js修改img的src属性问题

    今天在做项目,有个点击按钮切换图片功能,即修改img的src属性,在IE6下测试,切换图片不显示,右键选择显示图片,可以显示出来,琢磨了很久,最终发现是因为该按钮是a标签导致的, 随后上网查了下,有些 ...

  2. 类：初识类的事件（有点不明白，怎么普通Precedure可以赋值给TEvent）

    先勾画一下思路:1.建立一个类, 里面有年龄字段 FAge;2.通过 Age 属性读写 FAge;3.如果输入的年龄刚好是 100 岁, 将会激发一个事件, 这个事件我们给它命名为: OnHundre ...

  3. SQL Server索引的维护 - 索引碎片、填充因子 <第三篇>

    实际上,索引的维护主要包括以下两个方面: 页拆分 碎片 这两个问题都和页密度有关,虽然两者的表现形式在本质上有所区别,但是故障排除工具是一样的,因为处理是相同的. 对于非常小的表(比64KB小得多), ...

  4. Oracle 10g体系机构及安全管理《思维导图》

    通过学习Oracle数据库后,我对数据库又有了进一步的了解,Oracle数据库 10g体系机构分为 物理和逻辑存储结构. 下面是我对Oracle数据库做的思维导图和笔记 (全屏查看:<思维导图& ...

  5. EasyUI的下拉选择框控件方法被屏蔽处理方式

    1.html标签如下 <div id="selectMap" style="top: 1px;left: 80px;position: absolute;" ...

  6. First Missing Positive 解答

    Question Given an unsorted integer array, find the first missing positive integer. For example,Given ...

  7. Merge k Sorted Lists 解答

    Question Merge k sorted linked lists and return it as one sorted list. Analyze and describe its comp ...

  8. Cuckoo hash算法分析

    一 基本思想: cuckoo hash是一种解决hash冲突的方法,其目的是使用简单的hash 函数来提高hash table的利用率,同时保证O(1)的查询时间 基本思想是使用2个hash函数来处理 ...

  9. dp 46（再做一遍）

    Robberies http://acm.hdu.edu.cn/showproblem.php?pid=2955 背包;第一次做的时候把概率当做背包(放大100000倍化为整数):在此范围内最多能抢多 ...

  10. mongoDB global,startUplog

    1,show logs (Ruiy看到一些人干些事就跟拉shit一样(磨叽),就来气,娃儿的,还不知所谓,抱怨,叫器一大堆!!!,喝喝,就这它还三心二意学一个故事中的主人公小小明上课偷打`皮卡`玩,三 ...