d3js

Question

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

Answer 1

不，在 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

希望这有帮助！

Answer 2

<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。

Answer 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]) }
}
})