axis titles?

[jsfenfen]

Hi @mhkeller, this library is the real covfefe! Thanks for publishing it!

Question: is there an example that has axis title text in it, or something that describes this? I haven't seen it... Relatedly, I guess, is the theory here that if I want axis titles I should roll them myself? If that happens to be required, what would the "right" way be?

[mhkeller]

Hey Jacob! Glad you’re liking it! Very generally yes, the idea would be that an axis label would be created by the end user as opposed to layercake having a concept of specific layout elements. Anything that’s ink on the page is in user-land.

I’d say you have two options, both pretty easy and the only difference being your personal / application style of how you want to organize components or style requirements.

Option 1: Using the x-axis as an example, add an svg element to the existing axisX component and position the element with dy so that it sits below the axis tick labels. Then set a bottom margin on your graphic so there’s enough white space to see the label. For the y-axis, same idea bit you probably want to add rotation obviously.

If you have other graphics in this project that need an axis but no label, you can sill reuse this component by putting the text element inside an if statement looking for opts.label === true or something, similar to how gridlines is set up in the x and y axis example components.

Option 2: Essentially do the same thing as option 1 but make this text element its own component. I would go this route if maybe you wanted to make it an html layer if you want to style it in ways that may be tricky in svg or want line breaks, also needlessly tricky in svg. Or, if you simply feel it’s more organized to keep them separate then that’s cool too.

Personally I’d probably go option 1 since it’s just adding a single line to an existing component. These examples were built with the idea in mind as starting points for little project customizations like these so tweaks like this are what I was thinking people would do as neede!

[jsfenfen]

Cool, thanks so much for the detailed pointers @mhkeller!

[mhkeller]

Cool let me know how it goes! Maybe I should add a link in the readme to other components people have made as a little makeshift registry. If you publish it, buzz me and I'll add a link!

[jsfenfen]

FWIW I hacked stuff up to work like this: https://gist.github.com/jsfenfen/4157e119d81e3e5c0f29786185c6c9f2 ; it requires you to hardcode the padding to the LayerCake to a value different than the example, otherwise stuff gets cut off, and messing with font sizes would semi-break stuff, but...

[mhkeller]

yep that sounds like how i was imagining. looking at how i made these axis examples, i could do a little better job at making them consistent with one another. for example, on the y axis, i set the outer g's x transform and then ticks are only transformed with the y. but on the x axis example, i set the x, y transform on both ticks. if i set the outer g, then you could more consistently put the title g inside that first transformed g instead of applying the same transform again and maybe you'd be able to avoid hardcoding that 30. oh the joys of svg!