d3 axis labeling

Question

How do I add text labels to axes in d3?

For instance, I have a simple line graph with an x and y axis.

On my x-axis, I have ticks from 1 to 10. I want the word "days" to appear underneath it so people know the x axis is counting days.

Similarly, on the y-axis, I have the numbers 1-10 as ticks, and I want the words "sandwiches eaten" to appear sideways.

Is there a simple way to do this?

Answer 1

Axis labels aren't built-in to D3's axis component, but you can add labels yourself simply by adding an SVG text element. A good example of this is my recreation of Gapminder’s animated bubble chart, The Wealth & Health of Nations. The x-axis label looks like this:

svg.append("text")     .attr("class", "x label")     .attr("text-anchor", "end")     .attr("x", width)     .attr("y", height - 6)     .text("income per capita, inflation-adjusted (dollars)"); 

And the y-axis label like this:

svg.append("text")     .attr("class", "y label")     .attr("text-anchor", "end")     .attr("y", 6)     .attr("dy", ".75em")     .attr("transform", "rotate(-90)")     .text("life expectancy (years)"); 

You can also use a stylesheet to style these labels as you like, either together (.label) or individually (.x.label, .y.label).

Answer 2

In the new D3js version (version 3 onwards), when you create a chart axis via d3.svg.axis() function you have access to two methods called tickValues and tickFormat which are built-in inside the function so that you can specifies which values you need the ticks for and in what format you want the text to appear:

var formatAxis = d3.format("  0"); var axis = d3.svg.axis()         .scale(xScale)         .tickFormat(formatAxis)         .ticks(3)         .tickValues([100, 200, 300]) //specify an array here for values         .orient("bottom");