Display y-axis as percentages?

Question

I'm making a chart, and I want my y-axis tick labels to display as percentages (instead of decimals). How can I do this?

My current code looks something like

yAxis
  .append("text")
  .attr("class", "ticklabel")
  .attr("x", 0)
  .attr("y", y)
  .attr("dy", ".5em")
  .attr("text-anchor", "middle")
  .text(y.tickFormat(5))
  .attr("font-size", "10px")

I noticed that d3 has a format specifier, but I'm not sure how to use these in conjunction with tickFormat.

Answer 1

It looks like you authoring the axis by hand. I recommend using the d3.svg.axis component instead, which does the rendering for you. For example:

• http://bl.ocks.org/1166403

If you want to format ticks as percentages, then use d3.format's % directive:

var formatPercent = d3.format(".0%");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(formatPercent);

You can instead use the p directive if you want to round to the percentage to significant digits.

To answer your question more directly, you use d3.format instead of the scale's tickFormat. Scales provide a default tickFormat for convenience, but if you want different behavior, then you use a custom d3.format rather than the scale's default one.