d3.js - tick - d3 js tutorial

D3 marcas de verificación en enteros solamente

Question

Tengo un gráfico de barras d3 cuyos valores van desde 0-3. Me gustaría que el eje y muestre solo valores enteros, lo que puedo hacer mediante

var yAxis = d3.svg.axis().scale(y).orient("right").tickFormat(d3.format("d"));

Sin embargo, todavía hay marcas de verificación en las marcas no enteras. La configuración del formato de marca solo oculta esas etiquetas. Puedo establecer explícitamente el número de marcas o los valores de marca, pero lo que me gustaría hacer es poder especificar que las marcas de verificación solo aparecen en valores enteros. ¿Es eso posible?

Answer 1

De todas las soluciones enumeradas, no he podido deshacerme de las marcas.

.xAxis().ticks(4)
.tickFormat(d3.format("d"));

quitar las etiquetas pero no las garrapatas

Así que propongo aplicar un umbral en las garrapatas (). Si es inferior a 4, entonces se establece en el límite en sí (0,1,2,3). Se hace con:

.on("preRedraw", function(chart) {
    var maxTick = chart.group().top(1)[0].value;
    if (maxTick < 4) {
      chart.xAxis().ticks(maxTick);
    } else {
      chart.xAxis().ticks(4);
    }

});

Un jsfiddle está disponible en https://jsfiddle.net/PBrockmann/k7qnw3oj/

Déjame saber si hay una solución más simple. Saludos

Answer 2

Puede programar la cantidad de ticks en data.length - 1 (esto resuelve el problema que estaba teniendo también para pequeños números de ticks)

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .tickFormat(d3.format("d"))
    .ticks(data.length - 1)

Answer 3

Puedes agregar .ticks (4) y .tickSubdivide (0) como lo he hecho a continuación:

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .ticks(4)
.tickFormat(d3.format("d"))
    .tickSubdivide(0);

Answer 4

Usé este TIP para hacer que esto funcione en gráficos dinámicos (1 o más gráficos en la página)

Eso hizo el truco. Cambié a ser Math.min (maxHeight + 1, yAxis.ticks ()) por lo que si la altura del gráfico es menor que el número de tics, se reduce el número de tics. - Jeff Storey 28 de noviembre de 2012 a las 2:47

  // It is either 10 or Maximum Chart height + 1 

        var graphValues = selection.data()[0].map(function(obj) {
            return obj[''count''];
        }).compact();  

        Array.prototype.maxValArray = function() {
          return Math.max.apply(null, this);
        };

        var maxValue = graphValues.maxValArray();

        yAxis.ticks(Math.min(maxValue + 1, 10))