D3.js封裝文本實(shí)現(xiàn)自動(dòng)換行和旋轉(zhuǎn)平移等功能
我們下面話不多說,本文主要介紹的是利用D3.js封裝文本實(shí)現(xiàn)自動(dòng)換行功能的步驟,下面來一起看看吧。
一、引用 multext.js 文件
multext.js
function appendMultiText(container, str, posX, posY, width, fontsize, fontfamily){
if( arguments.length < 6){
fontsize = 14;
}
if( arguments.length < 7){
fontfamily = "simsun, arial";
}
//獲取分割后的字符串
var strs = splitByLine(str,width,fontsize);
var mulText = container.append("text")
.attr("x",posX)
.attr("y",posY)
.style("font-size",fontsize)
.style("font-family",fontfamily);
mulText.selectAll("tspan")
.data(strs)
.enter()
.append("tspan")
.attr("x",mulText.attr("x"))
.attr("dy","1em")
.text(function(d){
return d;
});
return mulText;
function splitByLine(str,max,fontsize){
var curLen = 0;
var result = [];
var start = 0, end = 0;
for(var i=0;i<str.length;i++){
var code = str.charCodeAt(i);
var pixelLen = code > 255 ? fontsize : fontsize/2;
curLen += pixelLen;
if(curLen > max){
end = i;
result.push(str.substring(start,end));
start = i;
curLen = pixelLen;
}
if( i === str.length - 1 ){
end = i;
result.push(str.substring(start,end+1));
}
}
return result;
}
}
可以另存為后,在 <script> 標(biāo)簽里引用:
<script src="multext.js" charset="utf-8"></script>
當(dāng)然,要使用此文件,同時(shí)要引用 d3 的庫:
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
二、函數(shù)的參數(shù)
文件里只實(shí)現(xiàn)了一個(gè)函數(shù) appendMultiText() ,其各參數(shù)的意義為:
appendMultiText( container, //文本的容器,可以是<svg>或<g> str, //字符串 posX, //文本的x坐標(biāo) posY, //文本的y坐標(biāo) width, //每一行的寬度,單位為像素 fontsize, //文字的大?。墒÷裕?,默認(rèn)為 14 fontfamily //文字的字體(可省略),默認(rèn)為 simsun, arial )
三、添加多行文本
下面添加多行文本試試。首先要添加<svg>元素:
var width = 300;
var height = 300;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
添加的<svg>元素,保存在變量 svg 中,這個(gè)變量要作為 appendMultiText 的參數(shù)使用。
接下來添加多行文本:
var str = "青青子衿,悠悠我心,但為君故,沉吟至今。";
appendMultiText(svg,str,30,100,120,20,"simsun");
代碼的意思為:在 svg 容器里的坐標(biāo)(30, 100)處添加指定字符串,每一行的長(zhǎng)度為120個(gè)像素,超出的部分自動(dòng)換行,字體大小為20,字體為宋體。
結(jié)果如下:

可以看到,添加了四行文字,每行的長(zhǎng)度為120個(gè)像素。appendMultiText自動(dòng)為我們添加了<text >和<tspan> 。
appendMultiText()的返回值是被添加的<text>元素的選擇集,可以用一個(gè)變量保存此值,再做旋轉(zhuǎn)平移之類的操作,當(dāng)然也可更改字體等,例如:
var str = "青青子衿,悠悠我心,但為君故,沉吟至今。";
var multext = appendMultiText(svg,str,30,100,120,20,"simsun");
multext.attr("transform","rotate(-20)");
文本逆時(shí)針旋轉(zhuǎn)20度。

你還可以將文本放到<g>元素里。
var g = svg.append("g");
var multext = appendMultiText(g,str,30,100,120);
如此,多行文本的所有元素會(huì)置于<g>之下。上面這段代碼的 appendMultiText() 省略了最后兩個(gè)參數(shù),如果省略,默認(rèn)字體大小為 14px ,字體為 simsun, arial。
總結(jié)
以上就是利用D3.js封裝文本實(shí)現(xiàn)自動(dòng)換行功能的全部?jī)?nèi)容,希望這篇文章的內(nèi)容對(duì)大家學(xué)習(xí)或者使用D3.js能有所幫助,如果有疑問大家可以留言交流。
相關(guān)文章
JavaScript 關(guān)于元素獲取焦點(diǎn)(隱藏元素與div)
關(guān)于元素獲取焦點(diǎn)要注意2個(gè)小問題,需要的朋友可以參考下。2011-01-01
javascript打印html內(nèi)容功能的方法示例
這篇文章主要介紹了javascript打印html內(nèi)容的小示例,大家參考使用2013-11-11
javascript制作游戲開發(fā)碰撞檢測(cè)的封裝代碼
這篇文章主要介紹了javascript制作游戲開發(fā)碰撞檢測(cè)的封裝代碼,需要的朋友可以參考下2015-03-03
微信小程序?qū)崿F(xiàn)滑動(dòng)/點(diǎn)擊切換Tab及scroll-left的使用
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)/點(diǎn)擊切換Tab,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
javascript檢測(cè)是否聯(lián)網(wǎng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript檢測(cè)是否聯(lián)網(wǎng)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09
JavaScript 網(wǎng)頁中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒數(shù)計(jì)時(shí)程序
這篇文章主要介紹了JavaScript 網(wǎng)頁中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒數(shù)計(jì)時(shí)程序,需要的朋友可以參考下2017-01-01

