Javascript 将SVG文本更改为css换行

下面的代码用于显示javascript树图的文本标签

nodeEnter.append("svg:text")
        .attr("x", function(d) { return d._children ? -8 : -48; }) /*the position of the text (left to right)*/
        .attr("y", 3) /*the position of the text (Up and Down)*/

        .text(function(d) { return d.name; });

---

这使用了svg，它没有文字包装功能。我该如何更改此选项以创建一个普通段落，以便使用css对其进行文字包装。如何生成此常规文本而不是svg文本？

您可能希望使用svg foreignObject标记，因此您可以使用如下内容：

nodeEnter.append("foreignObject")
    .attr("x", function(d) { return d._children ? -8 : -48; }) /*the position of the text (left to right)*/
    .attr("y", 3) /*the position of the text (Up and Down)*/
    .attr("width", your_text_width_variable)
    .attr("height", your_text_height_variable)
    .append("xhtml:body")
    .append("p")
    .text(function(d) { return d.name; });

svg.selectAll('text').call(wrapText, 100);

---

以下是Mike Bostock的一个要点，它帮助了我：

这是一个使用D3对文本进行文字包装的示例代码：

var nodes = [
    {title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut"}
]

var w = 960, h = 800;

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

var vSeparation = 13, textX=200, textY=100, maxLength=20

var textHolder = svg.selectAll("text")
    .data(nodes)
    .enter().append("text")
    .attr("x",textX)
    .attr("y",textY)
    .attr("text-anchor", "middle")
    .each(function (d) {
        var lines = wordwrap(d.title, maxLength)

        for (var i = 0; i < lines.length; i++) {
            d3.select(this).append("tspan").attr("dy",vSeparation).attr("x",textX).text(lines[i])
        }
    });


function wordwrap(text, max) {
    var regex = new RegExp(".{0,"+max+"}(?:\\s|$)","g");
    var lines = []

    var line
    while ((line = regex.exec(text))!="") {
        lines.push(line);
    } 

    return lines
}

var节点=[
{title:“Lorem ipsum door sit amet，concetetur adipising elit，sed do eiusmod temporal incidedunt ut”}
]
var w=960，h=800；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var vSeparation=13，textX=200，textY=100，maxLength=20
var textHolder=svg.selectAll（“文本”）
.数据（节点）
.enter（）.append（“文本”）
.attr（“x”，textX）
.attr（“y”，textY）
.attr（“文本锚定”、“中间”）
.每个功能（d）{
变量行=换行字（d.title，maxLength）
对于（变量i=0；i

IE不支持foreignObject

，Chrome不支持在其上进行转换。如果这些限制没有问题，那么我建议使用

foreignObject

，因为您可以获得HTML+CSS的所有格式

如果您需要支持IE或转换，那么我建议使用D3插件，例如。它使文本包装非常容易

d3plus.textwrap()
  .container('selector')
  .draw();

---

签出以阅读其所有功能。

您可以使用此通用函数，使用D3.js将svg:text元素中的文本包装为多个svg:tspan子元素（每行一个tspan）：

您可以这样使用它：

nodeEnter.append("foreignObject")
    .attr("x", function(d) { return d._children ? -8 : -48; }) /*the position of the text (left to right)*/
    .attr("y", 3) /*the position of the text (Up and Down)*/
    .attr("width", your_text_width_variable)
    .attr("height", your_text_height_variable)
    .append("xhtml:body")
    .append("p")
    .text(function(d) { return d.name; });

svg.selectAll('text').call(wrapText, 100);

---

我试过了，但是现在没有显示文本。我试着把这个应用到这个例子上。这就是我问题中的代码的来源。因为节点是svg圆，所以它不起作用吗？对不起，应该包括foreignObject的宽度和高度-我在回答中修改了代码，使其更清晰

foreignObject

似乎是唯一的解决方案，但请注意IE中不支持它（惊喜！）还有没有模仿

文本锚定：中间使用foreignObject的效果？需要更多的定制，但我喜欢。我可以修改你的技术来包装我的X轴标签。谢谢同样作为参考，@mbostock有一个更复杂的版本。最终，SVG2.0将包含单词包装。