我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧。
一、引用 multext.js 文件
multext.js
if( arguments.length < 6){
fontsize = 14;
}
if( arguments.length < 7){
fontfamily = "simsun,arial";
}
//获取分割后的字符串
var strs = splitByLine(str,fontsize);
var mulText = container.append("text")
.attr("x",posX)
.attr("y",posY)
.style("font-size",fontsize)
.style("font-family",fontfamily);
mulText.selectAll("tspan")
.data(strs)
.enter()
.append("tspan")
.attr("x",mulText.attr("x"))
.attr("dy","1em")
.text(function(d){
return d;
});
return mulText;
function splitByLine(str,max,fontsize){
var curLen = 0;
var result = [];
var start = 0,end = 0;
for(var i=0;i
var code = str.charCodeAt(i);
var pixelLen = code > 255 ? fontsize : fontsize/2;
curLen += pixelLen;
if(curLen > max){
end = i;
result.push(str.substring(start,end));
start = i;
curLen = pixelLen;
}
if( i === str.length - 1 ){
end = i;
result.push(str.substring(start,end+1));
}
}
return result;
}
}
可以另存为后,在 标签里引用:
当然,要使用此文件,同时要引用 d3 的库:
二、函数的参数
文件里只实现了一个函数 appendMultiText() ,其各参数的意义为:
或str,//字符串
posX,//文本的x坐标
posY,//文本的y坐标
width,//每一行的宽度,单位为像素
fontsize,//文字的大小(可省略),默认为 14
fontfamily //文字的字体(可省略),默认为 simsun,arial
)
三、添加多行文本
下面添加多行文本试试。首先要添加元素:
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
添加的元素,保存在变量 svg 中,这个变量要作为 appendMultiText的参数使用。
接下来添加多行文本:
appendMultiText(svg,30,100,120,20,"simsun");
代码的意思为:在 svg 容器里的坐标(30,100)处添加指定字符串,每一行的长度为120个像素,超出的部分自动换行,字体大小为20,字体为宋体。
结果如下:
可以看到,添加了四行文字,每行的长度为120个像素。appendMultiText自动为我们添加了和 。
appendMultiText()的返回值是被添加的元素的选择集,可以用一个变量保存此值,再做旋转平移之类的操作,当然也可更改字体等,例如:
var multext = appendMultiText(svg,"simsun");
multext.attr("transform","rotate(-20)");
文本逆时针旋转20度。
你还可以将文本放到元素里。
var multext = appendMultiText(g,120);
如此,多行文本的所有元素会置于之下。上面这段代码的 appendMultiText()省略了最后两个参数,如果省略,默认字体大小为 14px ,字体为 simsun,arial。
总结
以上就是利用D3.js封装文本实现自动换行功能的全部内容,希望这篇文章的内容对大家学习或者使用D3.js能有所帮助,如果有疑问大家可以留言交流。