Dynamic axis label values - How do I handle the margins

[Lee D]

I have a bargraph that can have dynamic values for it's y-axis labels.  Using http://bl.ocks.org/mbostock/3019563 (Margin Conventions) as an example for how I am currently setting margins, I cannot figure out how to make the left margin flexible, so it will fit the variable length y-axis labels and get everything to scale accordingly.  The requirement is to have the labels horizontal with no transformations, so the only way I can find to do this is to initially set the margins, draw the y-axis first, take a measurement of its width, then reset my svg width/height and linear and ordinal scales and draw everything else.

Seems like there should be an easier way and I am just missing something simple.  I also apologize if this a repost, the first post crashed the browser and I don't see it on the list.

Cheers

Lee

[Chris Viau]

Indeed you have to compute the svg text size while it's in the dom to resize the margins. Some alternatives:

-Add the text to the DOM as invisible just to compute the max width with getBBox, then remove it, size the margins and draw the text, so at least you don't have to redraw the chart and maybe see it flicker on resize.

-Use a monospace font so you just have to count the number of characters multiplied by the font-size (i.e., with a simple array.reduce)

-Leave space for a standard-length label and automatically crop to a number of characters

Lee

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Lee D]

Much appreciated, thanks Chris!  I figured I would have to measure it, just wanted to be sure there wasn't some dynamic magic, as part of D3, I was missing.