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 相关文章推荐
jQuery 树形结构的选择器
Feb 15 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
微信小程序异步处理详解
Nov 10 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
python生成器的使用方法
2013/11/21 Python
zbar解码二维码和条形码示例
2014/02/07 Python
python中的全局变量用法分析
2015/06/09 Python
详解python3实现的web端json通信协议
2016/12/29 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
详解Python_shutil模块
2019/03/15 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
公司搬迁通知
2015/04/20 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
退伍军人感言
2015/08/01 职场文书
致运动员的广播稿
2015/08/19 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript