Jak utworzyć niestandardowy formater osi dla godzin i minut w d3.js?
Mam zestaw danych wykresuję za pomocą d3.js. Oś x reprezentuje czas (w minutach). Chciałbym wyświetlić tę oś whh:mm
w formacie d3 nie mogę znaleźć sposobu, aby to zrobić.
Kod mojej osi wygląda tak:
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.svg.axis()
.scale(x)
.orient('bottom'));
Który generuje etykiety w minutach, które wyglądają[100, 115, 130, 140]
itd.
Moje obecne rozwiązanie to wybórtext
elementy po ich wygenerowaniu i nadpisuj je funkcją:
svg.selectAll('.x.axis text')
.text(function(d) {
d = d.toFixed();
var hours = Math.floor(d / 60);
var minutes = pad((d % 60), 2);
return hours + ":" + minutes;
});
Ta oś wyjściowa wygląda tak[1:40, 1:55, 2:10]
itd.
Ale to jest żartobliwe i unika użyciad3.format
. Czy jest lepszy sposób na tworzenie tych etykiet?