D3.js实现了文本换行的详细说明

1.单词包装有什么问题？

有一个字符串：

Var str='谁在云中送金书，当雁归，月满西楼'；你读过李清照的《剪梅》吗？

在正文中添加一个大小如下的svg元素：

var宽度=300；可变高度=300；var svg=d3.select('body ')。追加(' svg ')。attr('width '，width)。attr('高度'，高度)；然后添加文本并使用文本元素。我们熟悉这段代码：

var text=svg.append('text ')。attr('x '，30)。attr('y '，100)。attr('font-size '，30)。attr('font-family '，' simsun ')。文本(字符串)；结果如下：

可以看到，虽然文本元素标签的内容有整个字符串，但是由于svg只有300宽，所以无法显示这么长的字符串，所以看不到多余的部分。

怎么办？自然是要包装的。

其次，在文本中添加子元素

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

Tspan以文本形式编写，并作为其子元素存在。设置文本属性时，有一个dy属性，表示Y轴的相对位移。dy的值通常为10px和1em，其中em以行为单位。

这样，我们可以向文本中添加多个tspan，每个t span代表一条线。每个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=Tspan /text需要注意的是，t span中的x属性是必需的，这意味着下一行也是从x=30开始显示的。

三、D3的代码怎么写

对于第一部分中的字符串，首先在svg中添加一个文本元素，但不要设置其内容。

Var str='谁在云中送金书，当雁归，月满西楼'；var text=svg.append('text ')。attr('x '，30)。attr('y '，100)。attr('font-size '，30)。attr('font-family '，' simsun ')；使用JavaScript字符串分割来分割字符串：

var strs=str.split('，')；使用逗号作为分隔符，并将它们分成几个段落。输出结果是一个数组，数组中的每一项都是每个子字符串。可疑交易报告的价值是：

【《谁来送云上的金淑》《晏子回师》《月圆西楼》】好的，那就重点绑定文本元素上的数据，加上和strs一样长度的tspan元素。然后，为其x和dy属性赋值，然后指定字符串的内容。

代码如下：

text.selectAll('tspan ')。数据。输入()。追加(' tspan ')。attr('x '，text.attr('x ')。attr('dy '，' 1em ')。text(函数(d){ return d；});结果如下：

至此，我们基本完成了。如果您需要，这里有一个完整的示例代码供您参考。

完整的示例代码如下

html head meta charset=' utf-8 ' title文本换行/title/head body脚本src=' http:http://d3js.org/d3.v3.min.js' charset=' utf-8 '/script script var width=300；可变高度=300；var svg=d3.select('body ')。追加(' svg ')。attr('width '，width)。attr('高度'，高度)；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(str)；text.selectAll('tspan ')。数据。输入()。追加(' tspan ')。attr('x '，text.attr('x ')。attr('dy '，' 1em ')。text(函数(d){ return d；});/脚本/正文/html摘要

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