svg text wrapping issues - svg

Question

I am attempting to wrap called data into two lines of text on an svg. Right now it is displaying the text over six lines. Can anyone help with this.
function wrap(text, width, content) {
text.each(function () {
var text = d3.select(this),
words = content.split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1, // ems
x = text.attr("x"),
y = text.attr("y"),
dy = 0, //parseFloat(text.attr("dy")),
tspan = text.text(null)
.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(''));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", ++lineNumber * lineHeight + dy + "em")
.text(word);
}
}
});
}
Thermometer.prototype.drawTick = function(t, label, labelColor, textOffset, width, tubeWidth, lineColor, scale, svg) {
svg.append("line")
.attr("id", label + "Line")
.attr("x1", width / 2 - tubeWidth / 2)
.attr("x2", width / 2 + tubeWidth / 2)
.attr("y1", scale(t))
.attr("y2", scale(t))
.style("stroke", lineColor)
.style("stroke-width", "2px")
.style("shape-rendering", "crispEdges");
if (label) {
svg.append("text")
.attr("x", width / 2 + tubeWidth / 2 + 15)
.attr("y", scale(t))
.attr("dy", ".5em")
.text(label)
.style("fill", labelColor)
.style("stroke", "black")
.style("font-size", "14px")
.call(wrap,30,label)
}
};
return Thermometer;
the link to my fiddle is here
https://jsfiddle.net/corcorancr/sxs5n2cw/1/

Answer 1

The drawTick() function is calling another function called wrap() to plot the text. As might be suggested by that name, wrap() is splitting the input text into words and wrapping it onto a new line if it gets wider than the width you pass in.
The width value is the "30" in the following line:
.call(wrap,30,label)
Try changing it to something bigger so that it doesn't wrap so soon. 180 seems to be about the right value.
https://jsfiddle.net/sxs5n2cw/4/