Wrap text that are long

[barum]

I have text I need to display that are long. That is, the labels are long. Unless the size of the Sunburst is BIG, some text/labels do not display on the child objects. I can see the information int he toolTip, but no the label.

I want to wrap the label to display on multiple lines for the child objects. I saw this function from https://bl.ocks.org/mbostock/7555321 that I think should resolve the issues with bot Tooltip wrapping and labels.

If a call to wrap is done no matter what, this would automatically take care of the issue. set a parameter for the user (setMaxLabel(default=15)) . anything above 15 would wrap to next line. or the user can set it as they wish. a 0 means don't wrap

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).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", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

[barum]

P.S. hope you enjoy the coffee. Well earned. Transaction ID: 21011998108877578

[vasturiano]

@barum thanks for reaching out, and for your donation. It's much appreciated. 😃

I understand your motivation for having wrapped lines, but where this layout differs from the example you posted above is that the shape where the text is being inserted in is not rectangular, but based on radial segments. Thus, the difficulty of determining whether a certain label fits overall in the designated space, as well as how much space is available per line is much higher. This is a rather complex geometric computation.

In addition, the text labels are being written not on a straight line, but along a circular path that crosses the center of the segment, which further complicates things in determining optimal wrapping.