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
.Jak ograniczyć d3.svg.axis do etykiet całkowitych?
Odpowiedz
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.
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;
});
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"))
użyteczne. Czy istnieje sposób, aby go również usunąć znaki podziałki? Format ukrywa liczby połówkowe, ale zachowuje półznaczniki. – IBBoard
@IBBoard wypróbuj coś takiego: 'axis.ticks (tickCountSetter (yMax))' gdzie yMax to pewna liczba, używając tej funkcji: 'function tickCountSetter (n) {if (n <= 2) {return n} else {return 10}} ' – s2t2