Cómo limitar d3.svg.axis a las etiquetas de enteros?

Question

¿Hay alguna posibilidad de limitar el número de etiquetas enteras de d3.svg.axis que se muestran en el gráfico? Tomemos por ejemplo este gráfico. Solo hay 5 tamaños aquí: [0, 1, 2, 3, 4]. Sin embargo, los tics también se muestran para .5, 1.5, 2.5 y 3.5.

Answer 1

Usted debe ser capaz de utilizar d3.format en lugar de escribir su propio función de formato para esto.

d3.svg.axis() 
    .tickFormat(d3.format("d")); 

También puede utilizar tickFormat en su escala de la que el eje utilizará automáticamente de forma predeterminada.

Answer 2

me he dado cuenta de que es suficiente para ocultar estos valores, en lugar de excluir por completo. Esto se puede hacer mediante el tickFormat (https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format) tales como:

d3.svg.axis() 
    .tickFormat(function(e){ 
     if(Math.floor(e) != e) 
     { 
      return; 
     } 

     return e; 
    }); 

Answer 3

El uso de d3.format("d") como tickFormat podría no funcionar en todos los escenarios (see this bug). En los dispositivos Windows Phone (y probablemente en otros), los cálculos imprecisos pueden dar lugar a situaciones en las que los tics no se detectan correctamente como números enteros, i. mi. un tilde de "3" puede almacenarse internamente como 2.9999999999997 que para d3.format("d") no es un número entero.

Como resultado, el eje no se muestra en absoluto. Este comportamiento especialmente se vuelve aparente en rangos de ticks hasta 10.

Una posible solución es tolerar el error de máquina especificando un valor épsilon. Los valores no tienen que ser números enteros exactos de esta manera, pero pueden diferir de la siguiente entero hasta el rango de epsilon (que debe ser la forma más baja que su error de datos):

var epsilon = Math.pow(10,-7); 

var axis = d3.svg.axis().tickFormat(function(d) { 
    if (((d - Math.floor(d)) > epsilon) && ((Math.ceil(d) -d) > epsilon)) 
     return; 
    return d; 
} 

Otra solución, que también se menciona en otros hilos, es especificar un conteo de ticks fijo y luego redondear los ticks (que ahora debería ser "casi" entero) al entero más cercano. Necesita saber el valor máximo de sus datos para que esto funcione:

var axis = d3.svg.axis().ticks(dataMax).tickFormat(d3.format(".0f"))