O'Reilly logo

D3.js Quick Start Guide by Matthew Huntington

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating axes

D3 can automatically generate axes for you. Add the following to the bottom ofapp.js:

//pass the appropriate scale in as a parametervar bottomAxis = d3.axisBottom(xScale);

This creates a bottom axis generator that can be used to insert an axis into any element you choose. Add the following code to the bottom of app.js to append a <g> element inside our SVG element and then insert a bottom axis inside it:

d3.select('svg')
    .append('g') //put everything inside a group
    .call(bottomAxis); //generate the axis within the group

Here's what Chrome should look like:

Display of Chrome

We want the axis to be at the bottom of the SVG, though. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required