Styling Text marks

[pwiner]

Specifically, I am working with Plot.tree and Plot.text marks. As we all know, SVG does not implement border, fill, padding, etc. in the manner of HTML. Is there a good way to implement these? My goal is to display a .tree with the text nodes in boxes with rounded corners and colorful background fill.

[Fil]

It's difficult — you need to compute the exact size of the text after it is rendered; this can only be done by adding the chart to the DOM and then measuring the node with getBBox. This is what the Plot.tip mark does in the postrender function, which is called asynchronously:
https://github.com/observablehq/plot/blob/main/src/marks/tip.js#L203