【 D3.js 高級系列 — 1.1 】 封裝文本自動換行

在【高級 - 第 1.0 章】中講解了在 SVG 中如何配合使用 text 和 tspan 來實現換行的功能，本文對此功能進行一下封裝，之後就能夠直接用了。

1. 引用 js 文件

下載地址：multext.js

下載以後，在 <script> 標籤裏引用：

<script src="multext.js" charset="utf-8"></script>

或者直接經過網址引用：

<script src="http://www.ourd3js.com/library/multext.js" charset="utf-8"></script>

固然，要使用此文件，同時要引用 d3 的庫：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

2. 函數的參數

文件裏只實現了一個函數 appendMultiText()，其各參數的意義爲：

appendMultiText(
	container,			//文本的容器，能夠是<svg>或<g> 
	str, 				//字符串
	posX, 				//文本的x座標
	posY, 				//文本的y座標
	width, 				//每一行的寬度，單位爲像素
	fontsize, 			//文字的大小（可省略），默認爲 14
	fontfamily			//文字的字體（可省略），默認爲 simsun, arial
)

 

3. 添加多行文本

下面添加多行文本試試。首先要添加<svg>元素：

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

添加的<svg>元素，保存在變量 svg 中，這個變量要做爲 appendMultiText 的參數使用。接下來添加多行文本：

var str = "青青子衿，悠悠我心，但爲君故，沉吟至今。";			
						
appendMultiText(svg,str,30,100,120,20,"simsun");

代碼的意思爲：在 svg 容器裏的座標(30, 100)處添加指定字符串，每一行的長度爲120個像素，超出的部分自動換行，字體大小爲20，字體爲宋體。結果以下：

能夠看到，添加了四行文字，每行的長度爲120個像素。appendMultiText自動爲咱們添加了<text >和<tspan>。

appendMultiText()的返回值是被添加的<text>元素的選擇集，能夠用一個變量保存此值，再作旋轉平移之類的操做，固然也可更改字體等，例如：

var str = "青青子衿，悠悠我心，但爲君故，沉吟至今。";			
						
var multext = appendMultiText(svg,str,30,100,120,20,"simsun");
				
multext.attr("transform","rotate(-20)");

文本逆時針旋轉20度。

你還能夠將文本放到<g>元素裏。

var g = svg.append("g");
						
var multext = appendMultiText(g,str,30,100,120);

如此，多行文本的全部元素會置於<g>之下。上面這段代碼的 appendMultiText() 省略了最後兩個參數，若是省略，默認字體大小爲 14px ，字體爲 simsun, arial。

 

謝謝閱讀。

文檔信息

• 版權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
• 發表日期：2015 年 3 月 12 日
• 更多內容：OUR D3.JS - 數據可視化專題站 和 CSDN我的博客
• 備註：本文發表於 OUR D3.JS ，轉載請註明出處，謝謝