Center multi-line text on leaf nodes (tree layout)

[Cristhian]

Hi, I'm trying to draw a simple tree that contains on the internal node an operator ("AND" / "OR") and on the leaf node,  some conditions.

The text in this conditions spans multiple lines and can be quite lenghty (in some cases at around 50 chars)

So far I've been able to draw this layout using multiple <tspan> that contains each line. But I'm having issues on two things:

• Center the text in the middle of the node

When it was just one line of text it was easy using the text-anchor, but with multiple tspan elements I'm not sure how I can do that in a dynamic way.

• Update the size of the rectangle that wraps the leaf nodes to contain the whole text

Related with the previous point. I initialize the rectangles with a given size, but need to update to wrap the whole text. Also making the rectangle bigger overflows the limits of the svg

My code:

https://jsfiddle.net/kumark/vryL0wb2/11/

Any help would be greatly apreaciated.

Best,