This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Creating Axes with D3

7:32 D3 lesson by

Learn the ins and outs of creating chart axes in D3, as well as some options for customizing them.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Learn the ins and outs of creating chart axes in D3, as well as some options for customizing them.

Avatar
Trey

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

In reply to egghead.io
Avatar
Ben

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

In reply to Trey
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?