znaczniki wyboru d3 na liczbach całkowitych tylko

Question

Mam wykres słupkowy d3, którego wartości wahają się od 0-3. Chciałbym oś y tylko do wartości pokazują całkowitą, które mogę zrobić

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

Jednak nadal są znaczniki w oznakowań nie jest liczbą całkowitą. Ustawienie formatu zaznaczenia powoduje tylko ukrycie tych etykiet. Mogę jawnie ustawić liczbę ticków lub wartości tick, ale chciałbym tylko móc określić, że znaczniki pojawiają się tylko w wartościach całkowitych. Czy to jest możliwe?

Answer 1

można dodać .ticks (4) i .tickSubdivide (0) jak zrobiłem poniżej:

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

Answer 2

można programowo ustawić liczbę kleszczy do data.length - 1 (to rozwiązuje kwestia miałaś dla małej liczby kleszczy jak dobrze)

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

Answer 3

Używane ta końcówka do tej pracy na dynamicznych wykresów (1 lub więcej wykresy na stronie)

To wystarczyło. Zmieniłem na Math.min (maxHeight + 1, yAxis.ticks()), więc jeśli wysokość wykresu jest mniejsza o niż liczba znaczników, zmniejsza liczbę znaczników. - Jeff Piętro 28 listopada '12 w 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

ze wszystkich wymienionych rozwiązań, nie byłem w stanie pozbyć się znaków podziałki.

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

Usuń etykiety, ale nie kleszcze.

Proponuję więc zastosować próg dla kleszczy(). Jeżeli jest mniejszy niż 4, to jest ustawiony na sam limit (0,1,2,3). Czyni się z:

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

});

jsfiddle jest dostępny od https://jsfiddle.net/PBrockmann/k7qnw3oj/

Daj mi znać, jeśli istnieje prostsze rozwiązanie. Pozdrawiam