javascript 如何在javascript中对svg文本进行换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19447321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to linebreak an svg text in javascript?
提问by Jetson John
I am starting with d3.js, and am trying to create a network graph each circle of which contains a label.
我从 d3.js 开始，并试图创建一个网络图，每个圆都包含一个标签。
What I want is a line break an svg text.
我想要的是换行符 svg 文本。
What I am trying to do is to break the text into multiple <tspan>s, each with x="0" and variable "y" to simulate actual lines of text. The code I have written gives some unexpected result.
我想要做的是将文本分成多个<tspan>s，每个都有 x="0" 和变量 "y" 来模拟实际的文本行。我写的代码给出了一些意想不到的结果。
var text = svg.selectAll("text").data(force.nodes()).enter().append("text");
text
.text(function (d) {
arr = d.name.split(" ");
var arr = d.name.split(" ");
if (arr != undefined) {
for (i = 0; i < arr.length; i++) {
text.append("tspan")
.text(arr[i])
.attr("class", "tspan" + i);
}
}
});
In this code am splitting the text string by white space and appending the each splitted string to tspan. But the text belonging to other circle is also showing in each circle. How to overcome this issue?
在此代码中，我通过空格拆分文本字符串并将每个拆分的字符串附加到 tspan。但是属于其他圈子的文字也显示在每个圈子中。如何克服这个问题？
Here is a JSFIDDLE http://jsfiddle.net/xhNXS/with only svg text
这是一个只有 svg 文本的 JSFIDDLE http://jsfiddle.net/xhNXS/
Here is a JSFIDDLE http://jsfiddle.net/2NJ25/16/showing my problem with tspan.
这是一个 JSFIDDLE http://jsfiddle.net/2NJ25/16/显示了我的 tspan 问题。
回答by Lars Kotthoff
You need to specify the position (or offset) of each tspanelement to give the impression of a line break -- they are really just text containers that you can position arbitrarily. This is going to be much easier if you wrap the textelements in gelements because then you can specify "absolute" coordinates (i.e. xand y) for the elements within. This will make moving the tspanelements to the start of the line easier.
您需要指定每个tspan元素的位置（或偏移量）以给人一种换行的印象——它们实际上只是您可以任意定位的文本容器。如果您将text元素包装在元素中，这会容易得多，g因为这样您就可以为其中的元素指定“绝对”坐标（即x和y）。这将使tspan元素移动到行的开头更容易。
The main code to add the elements would look like this.
添加元素的主要代码如下所示。
text.append("text")
.each(function (d) {
var arr = d.name.split(" ");
for (i = 0; i < arr.length; i++) {
d3.select(this).append("tspan")
.text(arr[i])
.attr("dy", i ? "1.2em" : 0)
.attr("x", 0)
.attr("text-anchor", "middle")
.attr("class", "tspan" + i);
}
});
I'm using .each(), which will call the function for each element and not expect a return value instead of the .text()you were using. The dysetting designates the line height and xset to 0 means that every new line will start at the beginning of the block.
我正在使用.each()，它将为每个元素调用函数，并且不期望返回值而不是.text()您使用的返回值。该dy设置指定行高，x设置为 0 表示每条新行都将从块的开头开始。
Modified jsfiddle here, along with some other minor cleanups.
在这里修改了 jsfiddle ，以及其他一些小的清理。
