From the course: D3.js Essential Training

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Creating a linear axis

Creating a linear axis - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Creating a linear axis

“

- [Instructor] Now it's really time to see D3 in action. We're going to start by adding an axis and then we'll break down how that works. So now that we've done the scale, adding the axis itself is very simple. You tend to add a group. You don't actually have to, you could add the axis directly to the SVG, but then your dom gets very messy. And I'm going to give that a class of axis and Y so we can tell what's what later. And then you simply say, call d3.axisRight and you provide the scale. Okay, save that and refresh. And can you see, we now have a very green line on the left hand side of our chart running from top to bottom. Now we can't see any tick labels probably because of that. Let's have a look. There we go. Okay, so we can see the axis. The labels are perhaps on the wrong side compared to what you might be expecting. And the axis currently is going from the top of the screen to the bottom, which makes for uncomfortable viewing. So generally you have a bit of a buffer or a…

Contents