D3 Tips and Tricks: Interactive Data Visualization/

...

/

Adding the Y-Axis Label

Adding the Y-Axis Label

Learn to add a label to the y-axis.

We'll cover the following...

The code to add the label

So, the previous lesson covered the x-axis label. It is time to do the y-axis. The code we’re going to use looks like this:

Press + to interact
  // Add the y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
  // text label for the y axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Value");

For the sake of neatness, we put the piece of code in a nice logical spot, and this would be following the block of code that added the y-axis (but before the closing curly bracket).

And the result looks like this:

There we go! A label for the y-axis that is nicely centered and (gasp!) rotated by 90 degrees. Woah, does the leetness never end? (No. No, it does not.)

So, how do we get to this incredible result?

Explanation

Line 6: The first thing we do is the same as for the x-axis, ...