Muestra el eje y como porcentajes?

Question

Estoy haciendo un gráfico, y quiero que las etiquetas de mi eje y se muestren como porcentajes (en lugar de decimales). ¿Cómo puedo hacer esto?

Mi código actual se ve algo como

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

Noté que d3 tiene una format specifier, pero no estoy seguro de cómo utilizar estos en conjunto con tickFormat.

Answer 1

Parece que usted está escribiendo el eje a mano. Recomiendo usar el componente d3.svg.axis, que hace el renderizado por usted. Por ejemplo:

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

Si desea formato de garrapatas como porcentajes, a continuación, utilizar d3.format 's % Directiva:

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

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

en su lugar puede utilizar el p directiva si desea redondear el porcentaje a dígitos significativos.

Para responder a su pregunta más directamente, utilice d3.format en lugar de tickFormat de la báscula. Las escalas proporcionan un tickFormat predeterminado por conveniencia, pero si desea un comportamiento diferente, entonces usa un formato personalizado d3.format en lugar del predeterminado de la báscula.