Drawing the axes#

Let's start with the y axis. d3's d3-axis module has axis generator methods which will draw an axis for the given scale.

Unlike the methods we've used before, d3 axis generators will append multiple elements to the page.

There is one method for each orientation, which will specify the placement of labels and tick marks:

• axisTop

• axisRight

• axisBottom

• axisLeft

Following common convention, we want the labels of our y axis to be to the left of the axis line, so we'll use d3.axisLeft() and pass it our y scale.

const yAxisGenerator = d3.axisLeft()

  .scale(yScale)

When we call our axis generator, it will create a lot of elements — let's create a g element to hold all of those elements and keep our DOM organized. Then we'll pass that new element to our yAxisGenerator function to tell it where to draw our axis.

const yAxis = bounds.append("g")

yAxisGenerator(yAxis)

This method works but it will break up our chained methods. To fix this, d3 selections have a .call() method that will execute the provided function with the selection as the first parameter.

We can use .call() to:

1. prevent saving our selection as a variable, and

2. preserve the selection for additional chaining.

Note that this code does exactly the same thing as the snippet above - we are passing the function yAxisGenerator to .call(), which then runs the function for us.

const yAxis = bounds.append("g")

  .call(yAxisGenerator)