Creating Axes with D3
7:32
D3
lesson by Ben Clinkinbeard
Learn the ins and outs of creating chart axes in D3, as well as some options for customizing them.
Learn the ins and outs of creating chart axes in D3, as well as some options for customizing them.
Comment Guidelines
Member comments are a way for PRO Members to communicate, interact, and ask questions about a lesson.
Commenting Guidelines
Here are some basic guidelines for commenting on egghead.io.
Be on-topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact click here.
Avoid meta-discussion
Is your comment resembles:
It will likely be deleted as "meta".
Code problem?
Should be accompanied by code! JSFiddle, Plunker, CodePen, etc all provide a way to share code and discuss it in context.
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!
egghead.io comment guidelines
Learn the ins and outs of creating chart axes in D3, as well as some options for customizing them.
Hey Ben,
I was wondering if you could help me out with that padding on the axes. I would love to have the axes touching (as they are at the end of your video) but not allow the data elements to overlap. When you mention the padding, are you just referring to the CSS styling of the axis class? Also, where is the 'x' and 'y' classes coming from in 'x axis', 'y axis'? Something D3 gives you by default?
Thanks
Hey Trey,
I'd have to play with the code but my guess is you'd want to keep the "padding" that was being added in the transform calls, but figure out how to make the axes draw their lines past the normal stopping points to ensure they meet.
The x and y classes were just there in case you wanted to style them differently via .x.axis and/or .y.axis, etc.
Hope that helps,
Ben