【 D3.js 高级系列 — 1.0 】 文本的换行

在 SVG 中添加文本是使用 text 元素。但是，这个元素不能够自动换行，超出的部分就显示不出来了，怎么办呢？

高级系列开篇前言

从今天开始写高级系列教程。还是那句话，由于本人实力有限，不一定保证入门-进阶-高级，是一级比一级难的，大家选自己需要的阅读即可。

高级系列预计会先写一些常见的小问题（如本文）和剩下的三个布局（矩阵树图、堆栈图、捆图），然后写一些较复杂的图的制作方法，以及其交互式操作，例如：思维导图、多图联动、地图的标线标注等等。

近来嗓子像火烧一样，很不舒服，希望能快点好。o(>﹏<)o

1. 文字换行是什么问题

现有一字符串：

var str = "云中谁寄锦书来，雁字回时，月满西楼";

李清照的一剪梅，读过吗？

在 body 里添加一个 svg 元素，大小如下：

var width = 300;
var height = 300;

var svg = d3.select("body")
		.append("svg")
		.attr("width",width)
		.attr("height",height);

然后添加文字，用 text 元素，这样的代码我们很熟悉了：

var text = svg.append("text")
		.attr("x",30)
		.attr("y",100)
		.attr("font-size",30)
		.attr("font-family","simsun")
		.text(str);

结果如下：

可以看到，虽然 text 元素标签的内容有整个字符串，但是由于 svg 的宽度只有 300，显示不了这么长的字符串，因此多余的部分看不到。

怎么办？自然是要换行。

2. 在 text 中添加 tspan 子元素

SVG 中的文本不支持自动换行，需要手动实现。其中一种方法就是使用 tspan 标签。

tspan 是写在 text 中的，作为其子元素存在。设置文本属性的时候，有一个 dy 属性，表示 y 轴的相对位移，dy 的值通常用 10px、1em 这样的值，其中 em 是以行为单位的。

这样，我们就可以在 text 中添加多个 tspan ，每个代表一行。每一个 tspan 属性都赋予一个 1em 值（即一行）。如此，文本就会一行一行地显示了。

svg代码为：

<text x="30" y="100" font-size="30" font-family="simsun">
<tspan x="30" dy="1em">夜来幽梦忽还乡</tspan>
<tspan x="30" dy="1em">小轩窗</tspan>
<tspan x="30" dy="1em">正梳妆</tspan>
</text>

要注意，tspan 中的 x 属性是必要的，表示下一行也从 x = 30 处开始显示。

3. D3 的代码怎么写

对于第一节的字符串，先在 svg 中添加一个 text 元素，但是不设定其内容。

		var str = "云中谁寄锦书来，雁字回时，月满西楼";			

		var text = svg.append("text")
						.attr("x",30)
						.attr("y",100)
						.attr("font-size",30)
						.attr("font-family","simsun");

使用 JavaScript 字符串的 split 将 str 分段：

var strs = str.split("，") ;

用逗号作为分隔符，分为几段。输出结果为一个数组，数组中的各项是各子字符串。则 strs 的值为：

 ["云中谁寄锦书来", "雁字回时", "月满西楼"]

好，接下来是重点，在 text 元素上绑定数据，并添加与 strs 长度相同的 tspan 元素。然后，为其 x 和 dy 属性赋值，再指定字符串内容即可。

代码如下：

		text.selectAll("tspan")
				.data(strs)
				.enter()
				.append("tspan")
				.attr("x",text.attr("x"))
				.attr("dy","1em")
				.text(function(d){
					return d;
				});

结果如下：

完成。

完整代码可参见以下链接，右键查看源代码：

http://www.ourd3js.com/demo/G-1.0/tspan.html

谢谢阅读。

文档信息

• 版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
• 发表日期：2015 年 3 月 2 日
• 更多内容：OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
• 备注：本文发表于 OUR D3.JS ，转载请注明出处，谢谢