js template换行_D3.js实现文本的换行详解

一、文字换行是什么问题？

现有一字符串：

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，显示不了这么长的字符串，因此多余的部分看不到。

怎么办？自然是要换行。

二、在 text 中添加 tspan 子元素

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

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

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

svg代码为：

夜来幽梦忽还乡

小轩窗

正梳妆

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

三、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;

});

结果如下：

到这我们就基本完成了，下面给大家奉上完整的示例代码，有需要的可以参考。

完整实例代码如下

文字换行

var width = 300;

var height = 300;

var svg = d3.select("body")

.append("svg")

.attr("width",width)

.attr("height",height);

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

var text = svg.append("text")

.attr("x",30)

.attr("y",100)

.attr("font-size",30)

.attr("font-family","simsun");

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

console.log(strs);

text.selectAll("tspan")

.data(strs)

.enter()

.append("tspan")

.attr("x",text.attr("x"))

.attr("dy","1em")

.text(function(d){

return d;

});

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用D3.js能有所帮助，如果有疑问大家可以留言交流。