以百分比顯示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的默認值。