javascript - 将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

如果要将刻度格式化为百分比，请使用d3.format的%指令：

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

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

如果要将百分比四舍五入到有效数字，则可以改用p指令。

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