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

 更新时间:2016年10月14日 09:13:35   转载 作者:馒头华华  
相信大家都知道在SVG中添加文本是使用text元素。但这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢?下面通过这篇文章来给大家详细介绍下实现的过程。

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

现有一字符串:

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); 

结果如下:

可以看到,虽然 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; 
  }); 

结果如下:

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

完整实例代码如下

<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能有所帮助,如果有疑问大家可以留言交流。

相关文章

  • 如何屏蔽防止别的网站嵌入框架代码

    如何屏蔽防止别的网站嵌入框架代码

    目前,国内很流行一种流氓行为:使用框架(Frame),将你的网页嵌入它的网页中,如何防止嵌入框架代码呢,下面小编给大家整理了相关资料,如何屏蔽防止别的网站嵌入框架代码,需要的朋友一起来学习下
    2015-08-08
  • 微信小程序实现简单跑马灯效果

    微信小程序实现简单跑马灯效果

    这篇文章主要为大家详细介绍了微信小程序实现简单跑马灯效果 ,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1

    用Javascript做flash做的事..才完成的一个类.Auntion Action var

    用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1...
    2007-02-02
  • layui 实现表格某一列显示图标

    layui 实现表格某一列显示图标

    今天小编就为大家分享一篇layui 实现表格某一列显示图标的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript性能优化之小知识总结

    JavaScript性能优化之小知识总结

    JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文给大家介绍javascript性能优化之小知识总结,需要的朋友可以参考下
    2015-11-11
  • xtree.js 代码

    xtree.js 代码

    xtree.js 代码...
    2007-03-03
  • 移动端js触摸事件详解

    移动端js触摸事件详解

    这篇文章主要为大家详细介绍了移动端js触摸事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 通过js随机函数Math.random实现乱序

    通过js随机函数Math.random实现乱序

    这篇文章主要介绍了通过js随机函数Math.random实现乱序,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 基于JavaScript实现手机短信按钮倒计时(超简单)

    基于JavaScript实现手机短信按钮倒计时(超简单)

    在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面小编通过本篇文章给大家分享一段代码关于js实现手机短信按钮倒计时,需要的朋友参考下
    2015-12-12
  • 在JavaScript中如何解决用execCommand(

    在JavaScript中如何解决用execCommand(

    这篇文章主要给大家介绍在JavaScript中如何解决用execCommand("SaveAS")保存页面兼容性问题,设计到execCommand兼容性问题,感兴趣的朋友可以参考下本篇文章
    2015-10-10

最新评论