Clipping a Text mark?

[mbostock]

Should the Text mark support a clipping rect? A clipping circle? A way to reference another mark and use it as a clipping mask?

[mbostock]

Maybe we could do this by having one mark generate an id, and then the text mark could reference that id for clipping. For example, if you said:

Plot.rect(data, {id: "rect", ...options})

then you could say:

Plot.text(data, {clip: "rect", ...options})

and Plot would automatically pair by index (and also scope the id to each plot so that it doesn’t interfere with other plots on the page).

[Fil]

Maybe introduce a clip: "rect" option that consumes x1, x2, y1, y2 and adds a clip-path: polygon(…)

[Fil]

browser support for clip-path: polygon in SVG is not great… Current best effort notebook: https://observablehq.com/@observablehq/plot-treemap-clip

Edit: Jan. 2025 it seems like all three majors browsers now have correct support for clip-path: polygon / path.