D3.js封裝文本實現(xiàn)自動換行和旋轉(zhuǎn)平移等功能
我們下面話不多說，本文主要介紹的是利用D3.js封裝文本實現(xiàn)自動換行功能的步驟，下面來一起看看吧。
一、引用 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> 標簽里引用：
<script src="multext.js" charset="utf-8"></script>
當然，要使用此文件，同時要引用 d3 的庫：
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
二、函數(shù)的參數(shù)
文件里只實現(xiàn)了一個函數(shù) appendMultiText() ，其各參數(shù)的意義為：
appendMultiText( container, //文本的容器，可以是<svg>或<g> str, //字符串 posX, //文本的x坐標 posY, //文本的y坐標 width, //每一行的寬度，單位為像素 fontsize, //文字的大?。墒÷裕J為 14 fontfamily //文字的字體（可省略），默認為 simsun, arial )
三、添加多行文本
下面添加多行文本試試。首先要添加<svg>元素：
var width = 300;
var height = 300;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
添加的<svg>元素，保存在變量 svg 中，這個變量要作為 appendMultiText 的參數(shù)使用。
接下來添加多行文本：
var str = "青青子衿，悠悠我心，但為君故，沉吟至今。";
appendMultiText(svg,str,30,100,120,20,"simsun");
代碼的意思為：在 svg 容器里的坐標(30, 100)處添加指定字符串，每一行的長度為120個像素，超出的部分自動換行，字體大小為20，字體為宋體。
結(jié)果如下：
可以看到，添加了四行文字，每行的長度為120個像素。appendMultiText自動為我們添加了<text >和<tspan> 。
appendMultiText()的返回值是被添加的<text>元素的選擇集，可以用一個變量保存此值，再做旋轉(zhuǎn)平移之類的操作，當然也可更改字體等，例如：
var str = "青青子衿，悠悠我心，但為君故，沉吟至今。";
var multext = appendMultiText(svg,str,30,100,120,20,"simsun");
multext.attr("transform","rotate(-20)");
文本逆時針旋轉(zhuǎn)20度。
你還可以將文本放到<g>元素里。
var g = svg.append("g");
var multext = appendMultiText(g,str,30,100,120);
如此，多行文本的所有元素會置于<g>之下。上面這段代碼的 appendMultiText() 省略了最后兩個參數(shù)，如果省略，默認字體大小為 14px ，字體為 simsun, arial。
總結(jié)
以上就是利用D3.js封裝文本實現(xiàn)自動換行功能的全部內(nèi)容，希望這篇文章的內(nèi)容對大家學習或者使用D3.js能有所幫助，如果有疑問大家可以留言交流。
相關(guān)文章
javascript中數(shù)組的concat()方法使用介紹
數(shù)組的concat()方法想必大家比不陌生吧，在本文為大家介紹下javascript中數(shù)組的concat()方法的具體使用，感興趣的朋友可以參考下2013-12-12
Html5規(guī)范中規(guī)定自定義屬性需要添加前綴data-,目的是提供與渲染無關(guān)的信息,讀取的時候是通過dataset對象，使用”.”來獲取屬性，需要去掉data-前綴2023-06-06
微信小程序用戶授權(quán)獲取手機號（getPhoneNumber）
這篇文章主要給大家介紹了關(guān)于微信小程序用戶授權(quán)獲取手機號的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要介紹了詳解Next.js頁面渲染的優(yōu)化方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)計時器秒表功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章介紹了JS實現(xiàn)遮罩層效果的簡單實例，有需要的朋友可以參考一下2013-11-11
javascript電商網(wǎng)站搶購倒計時效果實現(xiàn)
這篇文章主要介紹了javascript電商網(wǎng)站搶購倒計時效果實現(xiàn)代碼，掌握日期對象Date，獲取時間的方法，感興趣的小伙伴們可以參考一下2015-11-11
TypeScript 是 JavaScript 的超集，TypeScript 經(jīng)過編譯之后都會生成 JavaScript 代碼。TypeScript 最大的特點就是類型化，因此才叫做 TypeScript。比起弱類型的 JavaScript，類型化的 TypeScript 顯得更加容易維護。2015-06-06
下面小編就為大家?guī)硪黄猨avascript輸出AscII碼擴展集中的字符方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-12-12
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)訂單倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06