D3.js封装文本实现自动换行和旋转平移等功能


Posted in Javascript onOctober 14, 2016

我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧。

一、引用 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>

二、函数的参数

文件里只实现了一个函数 appendMultiText() ,其各参数的意义为:

appendMultiText( 
  container,     //文本的容器,可以是<svg>或<g>  
  str,        //字符串 
  posX,        //文本的x坐标 
  posY,        //文本的y坐标 
  width,       //每一行的宽度,单位为像素 
  fontsize,      //文字的大小(可省略),默认为 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 的参数使用。

接下来添加多行文本:

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

代码的意思为:在 svg 容器里的坐标(30, 100)处添加指定字符串,每一行的长度为120个像素,超出的部分自动换行,字体大小为20,字体为宋体。

结果如下:

D3.js封装文本实现自动换行和旋转平移等功能

可以看到,添加了四行文字,每行的长度为120个像素。appendMultiText自动为我们添加了<text ><tspan>
appendMultiText()的返回值是被添加的<text>元素的选择集,可以用一个变量保存此值,再做旋转平移之类的操作,当然也可更改字体等,例如:

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

文本逆时针旋转20度。

D3.js封装文本实现自动换行和旋转平移等功能

你还可以将文本放到<g>元素里。

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

如此,多行文本的所有元素会置于<g>之下。上面这段代码的 appendMultiText() 省略了最后两个参数,如果省略,默认字体大小为 14px ,字体为 simsun, arial。

总结

以上就是利用D3.js封装文本实现自动换行功能的全部内容,希望这篇文章的内容对大家学习或者使用D3.js能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
textContent在Firefox下与innerText等效的属性
May 12 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
php与js的区别是什么
Aug 05 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
D3.js实现文本的换行详解
Oct 14 #Javascript
Bootstrap企业网站实战项目4
Oct 14 #Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 #Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 #Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 #Javascript
jQuery鼠标事件总结
Oct 13 #Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 #Javascript
You might like
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php格式化日期实例分析
2014/11/12 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
详解React 条件渲染
2020/07/08 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
Python实现快速多线程ping的方法
2015/07/15 Python
django model object序列化实例
2020/03/13 Python
python实现对变位词的判断方法
2020/04/05 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
教师演讲稿范文
2014/01/08 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
租房协议书范本
2014/04/09 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
法制宣传月活动总结
2014/04/29 职场文书
请病假条范文
2015/08/17 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android