【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、源码

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4. 		<meta charset="utf-8">
  5. 		<title>testD3-12-text.html</title>
  6. 		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
  7. 	<style type="text/css">
  8. 	</style>
  9. 	</head>
  10. 	<body>
  11. 		<script type="text/javascript">
  12. // 在 body 中插入一個 svg
  13. 	var svg = d3.select('body').append('svg');
  14.  // 先在 svg 中插入一個 path
  15. 	svg.append('path').attr({
  16. 		id: 'mypath',
  17. 		d: 'M50 100Q350 50 350 250Q250 50 50 250'
  18. 	}).style({
  19. 		fill: 'none',
  20. 		stroke: 'green',
  21. 		'stroke-width': 10
  22. 	});
  23. 	// 在 svg 中插入一個 text
  24. 	svg.append('text')
  25. 	.attr('x', 10)
  26. 	.attr('y', 20)
  27. 	.style('fill', 'steelblue')
  28. 	.style('font-size', '24px')
  29. 	.style('font-weight', 'bold')
  30. 	.append('textPath').attr({//引用路径
  31. 		'xlink:href': '#mypath'
  32. 	})
  33. 	.text('.text加入文字测试！并用xlink:href: #mypath加入了路径');
  34. 		</script>
  35.  
  36. 	</body>
  37. </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. SCSI接口图文详解

    目前存储设备的接口有五大类:IDE.SCSI.USB,并行口,串口,其中并行口与串口的速度非常慢,不提也罢,最主要的就是IDE,usb,SCSI.IDE(Integrated Drive Electr ...

  2. Qt之图标切分与合并（关键是使用QPixmap的copy函数来拷贝整张图片的某个区域）

    有些时候会将多张有相同功能的图片绘制成一张,不管是使用或者绘制上都会方便很多.对美工与开发者来说也都是一件省事.省力.更省心的方式.二全其美,又何乐而不为呢... 例如:QQ等级           ...

  3. Linux的环境变量配置

    以下都是环境变量相关的配置文件 1)/etc/enviroment 是系统的环境变量. (2)/etc/profile: 是所有用户的环境变量.当用户第一次登录时,该文件被执行. 并从/etc/pro ...

  4. java实现文件编码监测

    java实现文件编码监测 最近在做一个文档的翻译项目,可文档的编码不知道,听头疼的.尝试了很多方法最后发现JCharDet这个工具可以轻松解决这个问题.于是作此笔记希望日后提醒自己以及帮助又需要的人. ...

  5. Bring Your Charts to Life with HTML5 Canvas and JavaScript

    Bring Your Charts to Life with HTML5 Canvas and JavaScript Bring Your Charts to Life with HTML5 Canv ...

  6. Pros and Cons of T4 in Visual Studio 2008

    Oleg Sych - » Pros and Cons of T4 in Visual Studio 2008 Pros and Cons of T4 in Visual Studio 2008 Po ...

  7. hdu 5463 Clarke and minecraft（贪心）

    Problem Description Clarke is a patient with multiple personality disorder. One day, Clarke turned i ...

  8. Calculation(dfs+状压dp)

    Problem 1608 - Calculation Time Limit: 500MS   Memory Limit: 65536KB    Total Submit: 311  Accepted: ...

  9. C# 基础概念之延迟加载

    本文来自:http://kb.cnblogs.com/page/99182/ 作者: 杨延成  来源: 博客园  发布时间: 2011-05-01 15:06  阅读: 4662 次  推荐: 0   ...

  10. unity3d 捕获系统日志，来处理一些问题

    注册系统日志回调,根据日志内容和类型处理一些特殊问题 using UnityEngine; using System.Collections; public class SetupVerificati ...