下面我们就不多说了。本文主要介绍使用D3.js封装文本实现自动换行的步骤。让我们来看看。

1.引用multext.js文件

multext.js

function appendMultiText(container、str、posX、posY、width、fontsize、font family){ if(arguments . length 6){ font size=14；} if(arguments . length 7){ font family=' simsun，arial '；}//获取分段字符串varstrs=按行拆分(str，width，font size)；var mulText=container . append(' text ')。attr('x '，posX)。attr('y '，posY)。样式(' font-size '，fontsize)。样式(' font-family '，font family)；多文本选择全部。数据。输入()。追加(' tspan ')。attr('x '，mulText.attr('x ')。attr('dy '，' 1em ')。text(函数(d){ return d；});返回mulText函数splitByLine(str，max，font size){ var COlEN=0；var结果=[]；var开始=0，结束=0；for(var I=0；istr.lengthI){ var code=str . charcodeat(I)；var pixelLen=代码255？font size : font size/2；柯林=皮克斯林；if(CRoN max){ end=I；result.push(str.substring(开始，结束))；start=I；柯林=皮克斯林；} if(I===str . length-1){ end=I；result.push(str.substring(开始，结束1))；} }返回结果；}}可以另存为，然后在脚本标记中引用：

脚本src=' http : murtext . js ' charset=' utf-8 '/脚本。当然，要使用这个文件，请同时参考d3的库：

脚本src=' http:http://d3js.org/d3.v3.min.js'字符集=' utf-8 '/脚本ii。函数参数

文件中只实现了一个函数appendMultiText()，每个参数的含义是：

AppendMultiText(container，//文本的容器，可以是svg或g str，//string posX，//文本的x坐标posy，//文本的y坐标宽度，//每行的宽度以像素为单位fontsize，//文本的大小(可以省略)，默认为14 fontfamily //文本的字体(可以省略)

尝试在下面添加多行文本。首先添加svg元素：

var宽度=300；可变高度=300；var svg=d3.select('body ')。追加(' svg ')。attr('width '，width)。attr('高度'，高度)；添加的svg元素保存在变量svg中，该变量应该用作appendMultiText的参数。

然后添加多行文本：

Var str='绿色是我的心，但为了你，我一直在想它到目前为止'；appendMultiText(svg，str，30，100，120，20，' simsun ')；代码的意思是：在svg容器中的坐标(30，100)处添加一个指定的字符串，每行120像素长，多余的部分会自动换行，字体大小为20，字体为Tahoma。

结果如下：

如您所见，添加了四行文本，每行长度为120像素。AppendMultiText自动向我们添加文本和tspan。appendMultiText()的返回值是添加的文本元素的选择集。可以用变量保存这个值，然后进行旋转和平移等操作。当然，您也可以更改字体，例如：

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有所帮助，有问题可以留言交流。