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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
js正则表达式的使用详解
Jul 09 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
浅谈React之状态(State)
Sep 19 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
javascript实现检验的各种规则
2015/07/31 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
Python中print和return的作用及区别解析
2019/05/05 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
秋季开学典礼主持词
2014/03/19 职场文书
诚信贷款承诺书
2014/05/30 职场文书
主题团日活动总结
2014/06/25 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技