我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧。
一、引用 multext.js 文件
multext.js
function appendMultiText(container, str, posX, posY, width, fontsize, fontfamily){ if( arguments.length < 6){ fontsize = 14; } if( arguments.length < 7){ fontfamily = "simsun, arial"; } //获取分割后的字符串 var strs = splitByLine(str,width,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<str.length;i++){ var code = str.charCodeAt(i); var pixelLen = code > 255 "htmlcode"><script src="/UploadFiles/2021-04-02/multext.js">当然,要使用此文件,同时要引用 d3 的库:
<script src="/UploadFiles/2021-04-02/d3.v3.min.js">二、函数的参数
文件里只实现了一个函数
appendMultiText()
,其各参数的意义为:appendMultiText( container, //文本的容器,可以是<svg>或<g> str, //字符串 posX, //文本的x坐标 posY, //文本的y坐标 width, //每一行的宽度,单位为像素 fontsize, //文字的大小(可省略),默认为 14 fontfamily //文字的字体(可省略),默认为 simsun, arial )三、添加多行文本
下面添加多行文本试试。首先要添加<svg>元素:
var width = 300; var height = 300; var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height);添加的
<svg>
元素,保存在变量 svg 中,这个变量要作为appendMultiText
的参数使用。接下来添加多行文本:
var str = "青青子衿,悠悠我心,但为君故,沉吟至今。"; appendMultiText(svg,str,30,100,120,20,"simsun");代码的意思为:在 svg 容器里的坐标(30, 100)处添加指定字符串,每一行的长度为120个像素,超出的部分自动换行,字体大小为20,字体为宋体。
结果如下:
可以看到,添加了四行文字,每行的长度为120个像素。
appendMultiText
自动为我们添加了<text >
和<tspan>
。
appendMultiText()
的返回值是被添加的<text>
元素的选择集,可以用一个变量保存此值,再做旋转平移之类的操作,当然也可更改字体等,例如:var str = "青青子衿,悠悠我心,但为君故,沉吟至今。"; var multext = appendMultiText(svg,str,30,100,120,20,"simsun"); multext.attr("transform","rotate(-20)");文本逆时针旋转20度。
你还可以将文本放到
<g>
元素里。var g = svg.append("g"); var multext = appendMultiText(g,str,30,100,120);如此,多行文本的所有元素会置于
<g>
之下。上面这段代码的appendMultiText()
省略了最后两个参数,如果省略,默认字体大小为 14px ,字体为 simsun, arial。总结
以上就是利用D3.js封装文本实现自动换行功能的全部内容,希望这篇文章的内容对大家学习或者使用D3.js能有所帮助,如果有疑问大家可以留言交流。
相思资源网 Design By www.200059.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。