javascript - ¿Cómo limitar d3.svg.axis a las etiquetas enteras?

d3.js labels

Question

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

Answer 1

Debería poder usar d3.format lugar de escribir su propia función de formato para esto.

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

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

Answer 2

El uso de d3.format("d") como tickFormat podría no funcionar en todos los escenarios ( ver este error ). En dispositivos con Windows Phone (y probablemente otros), los cálculos imprecisos pueden llevar a situaciones en las que los ticks no se detectan correctamente como números enteros, es decir, 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 de hasta 10.

Una posible solución es tolerar el error de la máquina especificando un valor épsilon. Los valores no tienen que ser enteros exactos de esta manera, pero pueden diferir del siguiente entero hasta el rango epsilon (que debe ser mucho menor que el 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ían ser "casi" enteros) al entero más cercano. Necesitas saber el valor máximo de tus datos para que esto funcione:

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

Answer 3

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

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

        return e;
    });