How to put a break point in text in d3.js - d3.js

Question

I am drawing a piechart and i would like to have the labels with a break point. The labels are status and percentage which i get from csv file.
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc")
g.append("path")
.attr("d", arc)
.style("fill","#FFFFFF")
.transition()
.ease("bounce")
.duration(2000)
.delay(function(d, i) {return i * 1000;})
.style("fill", function(d) {return color(d.data.Source);});
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle")
.html(function(d) {
if (eval(d.data.Components) >0)
{
return ((d.data.status) + " </br> " + " " + d.data.Percentage + "%");
}
});

Answer 1

An alternative to the tspan and text elements is the foreignObject. You can append a foreignObject, then append normal HTML. For you it would like something similar to this:
g.append("foreignObject")
.attr("width", "100px")
.attr("height", "100px")
.append("xhtml:div")
.html(function(d) {
return ((d.data.status) + " <br> " + " " + d.data.Percentage + "%");
});
I've found this approach easier to work with than tspan and text elements in the past, as it doesn't involve appending and positioning more elements than necessary.

Answer 2

The text element does not allow br tags in it.
From the docs:
Each ‘text’ element causes a single string of text to be rendered. SVG performs no automatic line breaking or word wrapping. To achieve the effect of multiple lines of text, use one of the following methods:
The author or authoring package needs to pre-compute the line breaks and use multiple ‘text’ elements (one for each line of text).
The author or authoring package needs to pre-compute the line breaks and use a single ‘text’ element with one or more ‘tspan’ child
elements with appropriate values for attributes ‘x’, ‘y’, ‘dx’ and
‘dy’ to set new start positions for those characters which start new
lines. (This approach allows user text selection across multiple lines
of text -- see Text selection and clipboard operations.)
Express the text to be rendered in another XML namespace such as XHTML [XHTML] embedded inline within a ‘foreignObject’ element. (Note:
the exact semantics of this approach are not completely defined at
this time.)
In your case, for example, you'll have to put d.data.status and d.data.Percentage + "%" in two different tspans in the text element and manually specify dy on them to align them vertically, like the examples shown here.