当前位置：首页 > 资讯 > 技术文档

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

时间：2021-10-31 21:58 编辑：来源：阅读：
扫一扫，手机访问

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

[b]一、文字换行是什么问题？[/b] 现有一字符串：

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

李清照的一剪梅，读过吗？在 [code]body [/code]里添加一个 [code]svg [/code]元素，大小如下：

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

然后添加文字，用 [code]text [/code]元素，这样的代码我们很熟悉了：

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

[b]结果如下：[/b] [img]http://files.jb51.net/file_images/article/201610/2016101491034351.png?201691491046[/img] 可以看到，虽然 text 元素标签的内容有整个字符串，但是由于 [code]svg [/code]的宽度只有 300，显示不了这么长的字符串，因此多余的部分看不到。怎么办？自然是要换行。 [b]二、在 text 中添加 tspan 子元素[/b] SVG 中的文本不支持自动换行，需要手动实现。其中一种方法就是使用 [code]tspan [/code]标签。 [code]tspan [/code]是写在 [code]text [/code]中的，作为其子元素存在。设置文本属性的时候，有一个 [code]dy [/code]属性，表示 [code]y[/code] 轴的相对位移，[code]dy [/code]的值通常用 10px、1em 这样的值，其中 [code]em [/code]是以行为单位的。这样，我们就可以在 [code]text [/code]中添加多个 [code]tspan [/code]，每个代表一行。每一个 [code]tspan [/code]属性都赋予一个 1em 值（即一行）。如此，文本就会一行一行地显示了。 [b]svg代码为：[/b]

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

要注意，[code]tspan [/code]中的 x 属性是必要的，表示下一行也从 [code]x = 30 [/code]处开始显示。 [b]三、D3 的代码怎么写[/b] 对于第一节的字符串，先在 [code]svg [/code]中添加一个 [code]text [/code]元素，但是不设定其内容。

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

使用 JavaScript 字符串的 [code]split [/code]将 [code]str [/code]分段：

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

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

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

好，接下来是重点，在 [code]text [/code]元素上绑定数据，并添加与 [code]strs [/code]长度相同的 [code]tspan [/code]元素。然后，为其 [code]x[/code] 和 [code]dy[/code] 属性赋值，再指定字符串内容即可。 [b]代码如下：[/b]

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

[b]结果如下：[/b] [img]http://files.jb51.net/file_images/article/201610/2016101491231328.png?201691491243[/img] 到这我们就基本完成了，下面给大家奉上完整的示例代码，有需要的可以参考。 [b]完整实例代码如下[/b]

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

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

全部评论(0)

上一篇：BootStrap中的表单大全
下一篇：如何利用模板将HTML从JavaScript中抽离

资讯排行榜
更多>>