D3.js实现文本的换行详解


Posted in Javascript onOctober 14, 2016

一、文字换行是什么问题?

现有一字符串:

var str = "云中谁寄锦书来,雁字回时,月满西楼";

李清照的一剪梅,读过吗?

body 里添加一个 svg 元素,大小如下:

var width = 300; 
var height = 300; 
   
var svg = d3.select("body") 
  .append("svg") 
  .attr("width",width) 
  .attr("height",height);

然后添加文字,用 text 元素,这样的代码我们很熟悉了:

var text = svg.append("text") 
  .attr("x",30) 
  .attr("y",100) 
  .attr("font-size",30) 
  .attr("font-family","simsun") 
  .text(str);

结果如下:

D3.js实现文本的换行详解

可以看到,虽然 text 元素标签的内容有整个字符串,但是由于 svg 的宽度只有 300,显示不了这么长的字符串,因此多余的部分看不到。

怎么办?自然是要换行。

二、在 text 中添加 tspan 子元素

SVG 中的文本不支持自动换行,需要手动实现。其中一种方法就是使用 tspan 标签。

tspan 是写在 text 中的,作为其子元素存在。设置文本属性的时候,有一个 dy 属性,表示 y 轴的相对位移,dy 的值通常用 10px、1em 这样的值,其中 em 是以行为单位的。

这样,我们就可以在 text 中添加多个 tspan ,每个代表一行。每一个 tspan 属性都赋予一个 1em 值(即一行)。如此,文本就会一行一行地显示了。

svg代码为:

<text x="30" y="100" font-size="30" font-family="simsun"> 
<tspan x="30" dy="1em">夜来幽梦忽还乡</tspan> 
<tspan x="30" dy="1em">小轩窗</tspan> 
<tspan x="30" dy="1em">正梳妆</tspan> 
</text>

要注意,tspan 中的 x 属性是必要的,表示下一行也从 x = 30 处开始显示。

三、D3 的代码怎么写

对于第一节的字符串,先在 svg 中添加一个 text 元素,但是不设定其内容。

var str = "云中谁寄锦书来,雁字回时,月满西楼";   
  
var text = svg.append("text") 
    .attr("x",30) 
    .attr("y",100) 
    .attr("font-size",30) 
    .attr("font-family","simsun");

使用 JavaScript 字符串的 split str 分段:

var strs = str.split(",") ;

用逗号作为分隔符,分为几段。输出结果为一个数组,数组中的各项是各子字符串。则 strs 的值为:

["云中谁寄锦书来", "雁字回时", "月满西楼"]

好,接下来是重点,在 text 元素上绑定数据,并添加与 strs 长度相同的 tspan 元素。然后,为其 xdy 属性赋值,再指定字符串内容即可。

代码如下:

text.selectAll("tspan") 
  .data(strs) 
  .enter() 
  .append("tspan") 
  .attr("x",text.attr("x")) 
  .attr("dy","1em") 
  .text(function(d){ 
   return d; 
  });

结果如下:

D3.js实现文本的换行详解

到这我们就基本完成了,下面给大家奉上完整的示例代码,有需要的可以参考。

完整实例代码如下

<html>
 <head>
  <meta charset="utf-8"> 
  <title>文字换行</title> 
 </head> 
 <body> 
 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
  <script>  
 
 var width = 300;
 var height = 300;
 
 var svg = d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height);

 var str = "云中谁寄锦书来,雁字回时,月满西楼"; 
 
 var text = svg.append("text")
  .attr("x",30)
  .attr("y",100)
  .attr("font-size",30)
  .attr("font-family","simsun");
  
 var strs = str.split(",") ;
 
 console.log(strs);
  
 text.selectAll("tspan")
 .data(strs)
 .enter()
 .append("tspan")
 .attr("x",text.attr("x"))
 .attr("dy","1em")
 .text(function(d){
  return d;
 });
 
  
  </script> 
 
 </body> 
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用D3.js能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
vue实现图片按比例缩放问题操作
Aug 11 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
Bootstrap企业网站实战项目4
Oct 14 #Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 #Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 #Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 #Javascript
jQuery鼠标事件总结
Oct 13 #Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 #Javascript
jQuery中delegate()方法的用法详解
Oct 13 #Javascript
You might like
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
php while循环控制的简单实例
2016/05/30 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
社区党建工作汇报材料
2014/08/14 职场文书
升国旗演讲稿
2014/09/05 职场文书
英文道歉信
2015/01/20 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python