亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

D3.js封裝文本實(shí)現(xiàn)自動(dòng)換行和旋轉(zhuǎn)平移等功能

 更新時(shí)間:2016年10月14日 09:41:20   作者:饅頭華華  
之前小編和大家分享了SVG中如何配合使用text和tspan來(lái)實(shí)現(xiàn)換行的功能,所以這篇文章對(duì)此功能進(jìn)行一下封裝,以后就可以直接用了。有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。

我們下面話不多說(shuō),本文主要介紹的是利用D3.js封裝文本實(shí)現(xiàn)自動(dòng)換行功能的步驟,下面來(lái)一起看看吧。

一、引用 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 的庫(kù):

<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,      //文字的大?。墒÷裕J(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ù)使用。

接下來(lái)添加多行文本:

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能有所幫助,如果有疑問(wèn)大家可以留言交流。

相關(guān)文章

  • javascript中數(shù)組的concat()方法使用介紹

    javascript中數(shù)組的concat()方法使用介紹

    數(shù)組的concat()方法想必大家比不陌生吧,在本文為大家介紹下javascript中數(shù)組的concat()方法的具體使用,感興趣的朋友可以參考下
    2013-12-12
  • JavaScript 自定義屬性 data-*使用介紹

    JavaScript 自定義屬性 data-*使用介紹

    Html5規(guī)范中規(guī)定自定義屬性需要添加前綴data-,目的是提供與渲染無(wú)關(guān)的信息,讀取的時(shí)候是通過(guò)dataset對(duì)象,使用”.”來(lái)獲取屬性,需要去掉data-前綴
    2023-06-06
  • 微信小程序用戶授權(quán)獲取手機(jī)號(hào)(getPhoneNumber)

    微信小程序用戶授權(quán)獲取手機(jī)號(hào)(getPhoneNumber)

    這篇文章主要給大家介紹了關(guān)于微信小程序用戶授權(quán)獲取手機(jī)號(hào)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • 詳解Next.js頁(yè)面渲染的優(yōu)化方案

    詳解Next.js頁(yè)面渲染的優(yōu)化方案

    這篇文章主要介紹了詳解Next.js頁(yè)面渲染的優(yōu)化方案,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-01-01
  • js實(shí)現(xiàn)計(jì)時(shí)器秒表功能

    js實(shí)現(xiàn)計(jì)時(shí)器秒表功能

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)計(jì)時(shí)器秒表功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • JS實(shí)現(xiàn)遮罩層效果的簡(jiǎn)單實(shí)例

    JS實(shí)現(xiàn)遮罩層效果的簡(jiǎn)單實(shí)例

    這篇文章介紹了JS實(shí)現(xiàn)遮罩層效果的簡(jiǎn)單實(shí)例,有需要的朋友可以參考一下
    2013-11-11
  • javascript電商網(wǎng)站搶購(gòu)倒計(jì)時(shí)效果實(shí)現(xiàn)

    javascript電商網(wǎng)站搶購(gòu)倒計(jì)時(shí)效果實(shí)現(xiàn)

    這篇文章主要介紹了javascript電商網(wǎng)站搶購(gòu)倒計(jì)時(shí)效果實(shí)現(xiàn)代碼,掌握日期對(duì)象Date,獲取時(shí)間的方法,感興趣的小伙伴們可以參考一下
    2015-11-11
  • TypeScript 學(xué)習(xí)筆記之基本類型

    TypeScript 學(xué)習(xí)筆記之基本類型

    TypeScript 是 JavaScript 的超集,TypeScript 經(jīng)過(guò)編譯之后都會(huì)生成 JavaScript 代碼。TypeScript 最大的特點(diǎn)就是類型化,因此才叫做 TypeScript。比起弱類型的 JavaScript,類型化的 TypeScript 顯得更加容易維護(hù)。
    2015-06-06
  • javascript輸出AscII碼擴(kuò)展集中的字符方法

    javascript輸出AscII碼擴(kuò)展集中的字符方法

    下面小編就為大家?guī)?lái)一篇javascript輸出AscII碼擴(kuò)展集中的字符方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦
    2016-12-12
  • 微信小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí)

    微信小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí)

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-06-06

最新評(píng)論