【 D3.js 高级系列 — 1.1 】 封装文本自动换行

在【高级 – 第 1.0 章】中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了。

1. 引用 js 文件

下载地址:multext.js

下载之后,在 <script> 标签里引用:

或者直接通过网址引用:

当然,要使用此文件,同时要引用 d3 的库:

 

2. 函数的参数

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

 

3. 添加多行文本

下面添加多行文本试试。首先要添加<svg>元素:

添加的<svg>元素,保存在变量 svg 中,这个变量要作为 appendMultiText 的参数使用。接下来添加多行文本:

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

111

可以看到,添加了四行文字,每行的长度为120个像素。appendMultiText自动为我们添加了<text >和<tspan>。

appendMultiText()的返回值是被添加的<text>元素的选择集,可以用一个变量保存此值,再做旋转平移之类的操作,当然也可更改字体等,例如:

文本逆时针旋转20度。

112

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

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

 

谢谢阅读。

文档信息

【 D3.js 高级系列 — 1.1 】 封装文本自动换行》上有3条评论

  1. 【 D3.js 高级系列 】 总结那篇
    堆栈图链接指向错误

评论已关闭。