Visualizza l'asse y come percentuale?

Question

Sto creando un grafico e voglio che le mie etichette di graduazione sull'asse y vengano visualizzate come percentuali (anziché decimali). Come posso fare questo?

mio codice attuale assomigli a

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

ho notato che ha un d3 format specifier, ma non sono sicuro di come utilizzare questi in combinazione con tickFormat.

Answer 1

Sembra che tu abbia creato l'asse manualmente. Raccomando invece di utilizzare il componente d3.svg.axis, che esegue il rendering per te. Per esempio:

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

Se si desidera formato di zecche come percentuali, quindi utilizzare d3.format 's % direttiva:

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

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

si può invece utilizzare il p direttiva se si desidera arrotondare la percentuale a cifre significative.

Per rispondere alla domanda più direttamente, utilizzare d3.format anziché tickFormat della scala. Le bilance forniscono un tickFormat predefinito per comodità, ma se si desidera un comportamento diverso, si utilizza un d3.format personalizzato anziché quello predefinito della bilancia.