d3 segni di graduazione sui numeri interi solo

Question

Ho un grafico a barre d3 i cui valori vanno da 0-3. Desidero l'asse y per valori interi mostra solo che posso fare da

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

Tuttavia, vi sono ancora segni di graduazione le marcature non interi. L'impostazione del formato di spunta nasconde solo quelle etichette. Posso impostare in modo esplicito il numero di zecche o i valori di tick, ma quello che mi piacerebbe fare è solo essere in grado di specificare che i segni di spunta appaiono solo a valori interi. È possibile?

Answer 1

si potrebbe aggiungere .ticks (4) e .tickSubdivide (0) come ho fatto qui di seguito:

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

Answer 2

È possibile programatically impostare il numero di zecche a data.length - 1 (questo risolve il problema che si era visto per un piccolo numero di zecche e)

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

Answer 3

Usato questo suggerimento per fare questo lavoro su grafici dinamici (1 o più tabelle a pagina)

Questo ha fatto il trucco. Ho cambiato per essere Math.min (maxHeight + 1, yAxis.ticks()), quindi se l'altezza del grafico è inferiore a rispetto al numero di zecche, riduce il numero di zecche. - Jeff Storey 28 novembre '12 a 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)) 

Answer 4

Da tutte le soluzioni elencate, non sono stato in grado di sbarazzarsi fuori segni di graduazione.

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

rimuovere le etichette ma non le zecche.

Quindi mi propongo di applicare una soglia su tick(). Se inferiore a 4, viene impostato sul limite stesso (0,1,2,3). È fatto 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 è disponibile presso https://jsfiddle.net/PBrockmann/k7qnw3oj/

Fatemi sapere se c'è una soluzione più semplice. Saluti