以百分比显示y轴？

Question

我正在创建一个图表,我希望我的y轴刻度标签显示为百分比(而不是小数).我怎样才能做到这一点？

我当前的代码看起来像

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")

我注意到d3有一个格式说明符,但我不确定如何结合使用它们tickFormat.

Answer 1

看起来你手动创作轴.我建议使用d3.svg.axis组件,它为您进行渲染.例如:

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

如果要将ticks格式化为百分比,请使用d3.format的%指令:

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

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

如果要将百分比舍入为有效数字,则可以使用p指令.

要更直接地回答您的问题,请使用d3.format 而不是 scale的tickFormat.为方便起见,Scales提供了一个默认的tickFormat,但是如果你想要不同的行为,那么你使用自定义的d3.format而不是scale的默认行为.