Jak ograniczyć d3.svg.axis do etykiet całkowitych?

Question

Czy istnieje możliwość ograniczenia liczby wyświetlanych na wykresie liczb całkowitych d3.svg.axis? Weźmy na przykład ten wykres. Tutaj jest tylko 5 rozmiarów: [0, 1, 2, 3, 4]. Jednak tyknięcia są również wyświetlane dla .5, 1.5, 2.5 i 3.5.

Answer 1

Powinieneś być w stanie wykorzystać d3.format zamiast pisać własne funkcja formatu dla tego.

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

Można również użyć tickFormat na skalę, która oś automatycznie użyje domyślnie.

Answer 2

zdałem sobie sprawę, że to wystarczy, aby ukryć te wartości, zamiast całkowicie wykluczyć. Można to zrobić za pomocą tickFormat (https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format) jako takie:

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

     return e; 
    }); 

Answer 3

Używanie d3.format("d") jako tickFormat może nie działać we wszystkich scenariuszach (see this bug). W przypadku urządzeń z systemem Windows Phone (i prawdopodobnie innych) niedokładne obliczenia mogą prowadzić do sytuacji, w których znaczniki nie są poprawnie wykrywane jako liczby całkowite, i. mi. znacznik "3" może być wewnętrznie zapisany jako 2.9999999999997, który dla d3.format("d") nie jest liczbą całkowitą.

W rezultacie oś nie jest wyświetlana wcale. To zachowanie szczególnie uwidacznia się w zakresach od 1 do 10.

Jednym z możliwych rozwiązań jest tolerowanie błędu maszyny poprzez określenie wartości epsilon. Wartości nie muszą być dokładne liczby całkowite w ten sposób, ale może różnić się od najbliższej liczby całkowitej do zakresu epsilon (który powinien być sposób niższy niż błąd danych):

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; 
} 

Innym rozwiązaniem, które jest również wymienionym w innych wątkach należy określić stałą liczbę znaczników, a następnie zaokrąglić liczbę zaznaczeń (która teraz powinna być "prawie" liczbą całkowitą) do najbliższej liczby całkowitej. Musisz wiedzieć, maksymalną wartość danych dla tej pracy:

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