svg text wrapping issues

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/

I guess you didn't write this code yourself(?) It's quite easy to work out why that is happening. What have you tried to do to debug it? — Paul LeBeau, Jul 21 '17 at 20:10
@PaulLeBeau no, it comes [from here](https://stackoverflow.com/a/45241723/1038015) — Robert Longson, Jul 21 '17 at 20:56
Based on the circumstances here, it appears that you have copied a significant portion of the code in your question. While SO doesn't regularly get into copyright issues, not attributing the source of the code is plagiarism, which isn't acceptable on Stack Overflow (or anywhere on Stack Exchange). At a minimum, please include a link to the original source. If code is from another Stack Overflow question, then [more detailed attribution](https://meta.stackoverflow.com/a/356304/3773011) is required by the CC BY-SA 3.0 license. — Makyen, Jun 13 '18 at 19:32

score 0 · Answer 1 · answered Jul 21 '17 at 20:53

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/

svg text wrapping issues

1 Answers1