CODEWITHSUNDEEP
d3.js
bwarren2
bwarren2

Reputation: 1397

D3.js style management robust to changes

I am doing some amateur development with d3, and trying to manage styling through my CSS sheet. However, as I toy with sizing and widths etc, I find myself frequently adjusting other parameters manually to accommodate my changes. (For example, in altering font sizing for ticks, I need to adjust graph margins where those ticks are drawn.) Is there a more extensible way of styling/generating my charts to allow these changes without tons of tweaking? This workflow seems like an anti-pattern, but might be necessary when doing low-level graphics work.

Upvotes: 0

Views: 45

Answers (1)

AmeliaBR
AmeliaBR

Reputation: 27544

There are things you can do to make you graphic responsive to font size, but it increases the code and so is skipped in most examples.

You can use getComputedStyle to determine the font size, and make all your margins proportional to that. Or to be really flexible, you can draw the axis first, find the length of the longest tick label using .getBBox, and then use that as your margin value to reposition/resize everything.

Unfortunately, there is no equivalent to the CSS calc function to easily calculate out values like width = 100% - 5em; you have to get the computed styles for width and for font-size and calculate it yourself.

Upvotes: 1

Related Questions