Treemap help with labels / wrapping svg text, is this possible?

1

Here’s my codepen of the project https://codepen.io/eyopaoeia/full/maEvgx

The issue I’m having is with the labels, I had the idea that I wanted the labels to first sit on one line if it fits, then to rotate 90degrees on one line if that fits, and then if that still doesn’t fit then to split the text as if it was wrapped, i.e. fitting as much on each line as possible, as opposed to splitting after every word or something.
I have the first two steps down but can’t figure out how to implement the third situation. Right now i have also split on colons to tidy it up a bit but that’s not really what I want to end up with, here is the relevant section of code:

  cells.append('text')
       .text(d => d.data.name.replace(/:\s/g, ':\n'))
       .attr('y', 10)
       .attr('x', 5)
       .attr('class', 'label')
       .style('white-space', 'pre-line')
       .attr('transform', function(d) {
          var textLength = this.getComputedTextLength();
          var boundary = this.previousSibling.getBBox();
    
          return textLength < boundary.width ? 'initial' 
          : textLength < boundary.height ? `translate(${boundary.width},0) rotate(90)`
          : 'initial'
        })

I’m not sure if it’s even possible to do it this way, but if anybody has any suggestions or other ideas I’d love to hear it, thanks

1 Like