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 相关文章推荐
javascript之更有效率的字符串替换
Aug 02 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
如何使JavaScript休眠或等待
Apr 27 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
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
用JS控制回车事件的代码
2011/02/20 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
koa源码中promise的解读
2018/11/13 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
Python函数学习笔记
2008/10/07 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python类属性与实例属性用法分析
2015/05/09 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
django中ImageField的使用详解
2020/12/21 Python
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
开学典礼感言
2014/02/16 职场文书
抽奖活动主持词
2014/03/31 职场文书
公司合作意向书
2014/04/01 职场文书
投资合作协议书
2014/04/17 职场文书
求职信怎么写
2014/05/23 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
公司年会主持词范文!
2019/05/07 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
frg-100简单操作(设置)说明
2022/04/05 无线电