在【高级 - 第 1.0 章】中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了。
1. 引用 js 文件
下载地址:multext.js
下载之后,在 <script> 标签里引用:
<script src="multext.js" charset="utf-8"></script>
或者直接通过网址引用:
<script src="http://www.ourd3js.com/library/multext.js" charset="utf-8"></script>
当然,要使用此文件,同时要引用 d3 的库:
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
2. 函数的参数
文件里只实现了一个函数 appendMultiText(),其各参数的意义为:
appendMultiText(
container, //文本的容器,可以是<svg>或<g>
str, //字符串
posX, //文本的x坐标
posY, //文本的y坐标
width, //每一行的宽度,单位为像素
fontsize, //文字的大小(可省略),默认为 14
fontfamily //文字的字体(可省略),默认为 simsun, arial
)
3. 添加多行文本
下面添加多行文本试试。首先要添加<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,字体为宋体。结果如下:
可以看到,添加了四行文字,每行的长度为120个像素。appendMultiText自动为我们添加了<text >和<tspan>。
appendMultiText()的返回值是被添加的<text>元素的选择集,可以用一个变量保存此值,再做旋转平移之类的操作,当然也可更改字体等,例如:
var str = "青青子衿,悠悠我心,但为君故,沉吟至今。"; var multext = appendMultiText(svg,str,30,100,120,20,"simsun"); multext.attr("transform","rotate(-20)");
文本逆时针旋转20度。
你还可以将文本放到<g>元素里。
var g = svg.append("g"); var multext = appendMultiText(g,str,30,100,120);
如此,多行文本的所有元素会置于<g>之下。上面这段代码的 appendMultiText() 省略了最后两个参数,如果省略,默认字体大小为 14px ,字体为 simsun, arial。
谢谢阅读。
文档信息
- 版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)
- 发表日期:2015 年 3 月 12 日
- 更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
- 备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢