一、文字换行是什么问题?
现有一字符串:
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能有所帮助,如果有疑问大家可以留言交流。