CODEWITHSUNDEEP
csssvgd3.jsvisualization
Uri Laserson
Uri Laserson

Reputation: 2451

How do I use d3.js to display text in an SVG rect only if the text will fit?

I am creating a visualization with d3 that contains a bunch of rect elements of different sizes. I'd like to put in a "caption" into each rect element, but I'd only like it to be displayed if the text fits naturally. How would this be done?

Upvotes: 2

Views: 5262

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You get the bounding box of the text, check whether it's too big for the rect element and remove it if this is the case. Here is an example of how to get the bounding box of a text element.

Upvotes: 3

Related Questions