以百分比显示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拥有format specifier，但我不知道如何结合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的默认值。