我正在创建一个图表,我希望我的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有一个format specifier,但我不确定如何将它们与tickFormat
结合使用。
答案 0 :(得分:40)
看起来您手动创作轴。我建议使用d3.svg.axis组件,它会为您进行渲染。例如:
如果您想将百分比格式化为百分比,请使用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的默认行为。