D3.js實(shí)現(xiàn)文本的換行詳解

更新時(shí)間：2016年10月14日 09:13:35 作者：饅頭華華

相信大家都知道在SVG中添加文本是使用text元素。但這個(gè)元素不能夠自動(dòng)換行，超出的部分就顯示不出來了，怎么辦呢？下面通過這篇文章來給大家詳細(xì)介紹下實(shí)現(xiàn)的過程。

一、文字換行是什么問題？

現(xiàn)有一字符串：

var str = "云中誰寄錦書來，雁字回時(shí)，月滿西樓";

李清照的一剪梅，讀過嗎？

在 body 里添加一個(gè) 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);

結(jié)果如下：

可以看到，雖然 text 元素標(biāo)簽的內(nèi)容有整個(gè)字符串，但是由于 svg 的寬度只有 300，顯示不了這么長的字符串，因此多余的部分看不到。

怎么辦？自然是要換行。

二、在 text 中添加 tspan 子元素

SVG 中的文本不支持自動(dòng)換行，需要手動(dòng)實(shí)現(xiàn)。其中一種方法就是使用 tspan 標(biāo)簽。

tspan 是寫在 text 中的，作為其子元素存在。設(shè)置文本屬性的時(shí)候，有一個(gè) dy 屬性，表示 y 軸的相對(duì)位移，dy 的值通常用 10px、1em 這樣的值，其中 em 是以行為單位的。

這樣，我們就可以在 text 中添加多個(gè) tspan ，每個(gè)代表一行。每一個(gè) tspan 屬性都賦予一個(gè) 1em 值（即一行）。如此，文本就會(huì)一行一行地顯示了。

svg代碼為：

<text x="30" y="100" font-size="30" font-family="simsun"> 
<tspan x="30" dy="1em">夜來幽夢忽還鄉(xiāng)</tspan> 
<tspan x="30" dy="1em">小軒窗</tspan> 
<tspan x="30" dy="1em">正梳妝</tspan> 
</text>

要注意，tspan 中的 x 屬性是必要的，表示下一行也從 x = 30 處開始顯示。

三、D3 的代碼怎么寫

對(duì)于第一節(jié)的字符串，先在 svg 中添加一個(gè) text 元素，但是不設(shè)定其內(nèi)容。

var str = "云中誰寄錦書來，雁字回時(shí)，月滿西樓";   
  
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("，") ;

用逗號(hào)作為分隔符，分為幾段。輸出結(jié)果為一個(gè)數(shù)組，數(shù)組中的各項(xiàng)是各子字符串。則 strs 的值為：

["云中誰寄錦書來", "雁字回時(shí)", "月滿西樓"]

好，接下來是重點(diǎn)，在 text 元素上綁定數(shù)據(jù)，并添加與 strs 長度相同的 tspan 元素。然后，為其 x 和 dy 屬性賦值，再指定字符串內(nèi)容即可。

代碼如下：

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

結(jié)果如下：

到這我們就基本完成了，下面給大家奉上完整的示例代碼，有需要的可以參考。

完整實(shí)例代碼如下

<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 = "云中誰寄錦書來，雁字回時(shí)，月滿西樓"; 
 
 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>

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者使用D3.js能有所幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: