【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 中插入一個 svgvar svg = d3.select('body').append('svg');// 先在 svg 中插入一個 pathsvg.append('path').attr({id: 'mypath',d: 'M50 100Q350 50 350 250Q250 50 50 250'}).style({fill: 'none',stroke: 'green','stroke-width': 10});// 在 svg 中插入一個 textsvg.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系列教程】--（十四）有路径的文字相关推荐

Cobaltstrike系列教程(十四)网站克隆与邮件鱼叉钓鱼
0x000-前言有技术交流或渗透测试培训需求的朋友欢迎联系QQ/VX-547006660,需要代码审计.渗透测试.红蓝对抗网络安全相关业务可以咨询我 2000人网络安全交流群,欢迎大佬们来玩群号8 ...
twisted系列教程十四— pre-fireed deferred
Introduction 在这一部分我们将要学习deferred 类的另外的一个方面.为了促进讨论,我们要为我们的poetry service增加一个server.假设我们有大量的内部的client ...
Spring Boot2 系列教程(十四)CORS 解决跨域问题
今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由 Netsca ...
js系列二十四：额外知识补充，无限参数柯理化
在前端经常面试中,可能会运到这样一个问题涉及到柯理化的题目 add(1)(2)(3) = 6; add(1, 2, 3)(4) = 10; add(1)(2)(3)(4) = 15; 这个问题的目的是 ...
PVE系列教程(十九)、ubuntu22.04使用Nginx配置chevereto服务器
PVE系列教程(十九).ubuntu22.04使用Nginx配置chevereto服务器为了更好的浏览体验,欢迎光顾勤奋的凯尔森同学个人博客http://www.huerpu.cc:7000 一.环 ...
js系列教程5-数据结构和算法全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
html5游戏制作入门系列教程（四）
今天,我们继续一系列文章,使用HTML5的canvas组件进行游戏开发.今天我们要学习下元素:声音控制与动画.在我们的演示中,你会看到一个飞龙.我们会听到持续的翅膀拍打的声音(我们将循环这个声音), ...
js系列教程4-函数、函数参数全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
akka学习教程(十四) akka分布式实战
akka系列文章目录 akka学习教程(十四) akka分布式实战 akka学习教程(十三) akka分布式 akka学习教程(十二) Spring与Akka的集成 akka学习教程(十一) akka ...

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

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

1、在 svg 中插入一個 text

2、添加文字路径

3、源码

4、效果

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

最新文章

热门文章

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

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

1、 在 svg 中插入一個 text

2、添加文字路径

3、源码

4、效果

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

最新文章

热门文章

1、在 svg 中插入一個 text