在 SVG 中添加文本是使用 text 元素。但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢?
高级系列开篇前言
从今天开始写高级系列教程。还是那句话,由于本人实力有限,不一定保证入门-进阶-高级,是一级比一级难的,大家选自己需要的阅读即可。
高级系列预计会先写一些常见的小问题(如本文)和剩下的三个布局(矩阵树图、堆栈图、捆图),然后写一些较复杂的图的制作方法,以及其交互式操作,例如:思维导图、多图联动、地图的标线标注等等。
近来嗓子像火烧一样,很不舒服,希望能快点好。o(>﹏<)o
1. 文字换行是什么问题
现有一字符串:
1 |
var str = "云中谁寄锦书来,雁字回时,月满西楼"; |
李清照的一剪梅,读过吗?
在 body 里添加一个 svg 元素,大小如下:
1 2 3 4 5 6 7 |
var width = 300; var height = 300; var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); |
然后添加文字,用 text 元素,这样的代码我们很熟悉了:
1 2 3 4 5 6 |
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代码为:
1 2 3 4 5 |
<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 元素,但是不设定其内容。
1 2 3 4 5 6 7 |
var str = "云中谁寄锦书来,雁字回时,月满西楼"; var text = svg.append("text") .attr("x",30) .attr("y",100) .attr("font-size",30) .attr("font-family","simsun"); |
使用 JavaScript 字符串的 split 将 str 分段:
1 |
var strs = str.split(",") ; |
用逗号作为分隔符,分为几段。输出结果为一个数组,数组中的各项是各子字符串。则 strs 的值为:
1 |
["云中谁寄锦书来", "雁字回时", "月满西楼"] |
好,接下来是重点,在 text 元素上绑定数据,并添加与 strs 长度相同的 tspan 元素。然后,为其 x 和 dy 属性赋值,再指定字符串内容即可。代码如下:
1 2 3 4 5 6 7 8 9 |
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 ,转载请注明出处,谢谢
Pingback引用通告: 【 D3.js 高级系列 】 总结 - Web前端 - 阿里欧歌
请教:
https://www.microsoft.com/investor/EarningsAndFinancials/Earnings/Kpi/fy15/q3/Detail.aspx
如该页面上第一个图上的折线动画,请教用D3怎么实现,自己模拟了一个是不停的改变d,感觉实现方式太笨了,有没有更好的实现方法?
谢谢
你说自己是“不停改变d”,如果没理解错的话,你是不断地改变数据吗?
当然不必如此,D3中有“过渡transition”的概念。
你可以阅读:http://www.ourd3js.com/demo/transition.html
谢谢。
期待~