d3js中节点文本中的换行符[重复]答案

【问题标题】：Line break in node text in d3js [duplicate]d3js中节点文本中的换行符[重复]
【发布时间】：2015-10-12 11:25:09
【问题描述】：

我正在使用.html(function (d) { return d.name + "<br/>"+d.label; }) 在节点文本中添加换行符，但它不起作用。这是 jsfiddle example。

【问题讨论】：

标签： d3.js

【解决方案1】：

<br> not 在 svg 中工作。使用tspan：

.html(function (d) {
  return "<tspan x='0' dy='1.2em'>" + d.name + "</tspan>" 
       + "<tspan x='0' dy='1.2em'>" +d.label + "</tspan>";
})

有关自动换行，请参阅 Mike Bostock 的 this block。

【讨论】：

【解决方案2】：

不，在 text DOM 中不考虑 br 标签。

您必须使用 tspan 并定位它。

 .html(function (d) {
        var x = d3.select(this).attr("x");//get the x position of the text
        var y = d3.select(this).attr("dy");//get the y position of the text
        var t = "<tspan x="+x+" dy="+(+y+10)+">"+d.label+"</tspan>";
        return d.name + t;//appending it to the html
    }

完整的工作代码here

希望这会有所帮助！

【讨论】：

感谢西里尔，它的工作。

【解决方案3】：

在这里我更新了我的example，编写了代码包装函数：function wordwrap2(text) {return text.split("-")}，并在迭代节点时使用它：.each(function(d){ if(d.label) { var r = d.name; var s =d.label; var s = d.name + "-"+d.label; var lines = wordwrap2(s) for (var i = 0; i < lines.length; i++) { d3.select(this).append("tspan") .attr("dy",13) .attr("x",function(d) { return d.children1 || d._children1 ? -10 : -10; }) .text(lines[i]) } } })

【讨论】：