Line break in node text in d3js

Question

I am using .html(function (d) { return d.name + "<br/>"+d.label; }) to add a line break in node text, which is not working. Here is the jsfiddle example.

Answer 1

<br> does not work in svg. Use tspan:

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

For automated line wrapping, see this block by Mike Bostock.

Answer 2

No, the br tag is not considered with in the text DOM.

You will have to use tspan and position it.

 .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
    }

Full working code here

Hope this helps!

Answer 3

Here i updated my example, written code wrap function : function wordwrap2(text) {return text.split("-")} and using it while ierating the the node : .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]) }
}
})