Как мне сделать собственный форматировщик оси для часов и минут в d3.js?
У меня есть набор данных, который я строю с помощью d3.js. Ось X представляет время (в минутах). Я хотел бы отобразить эту ось в видеhh:mm
формат, и я не могу найти способ сделать это чисто в d3.
Мой код оси выглядит так:
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.svg.axis()
.scale(x)
.orient('bottom'));
Который генерирует ярлыки за считанные минуты[100, 115, 130, 140]
, так далее.
Мое текущее решение состоит в том, чтобы выбратьtext
элементы после того, как они были сгенерированы, и переопределите их с помощью функции:
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;
});
Это выводит ось галочки как[1:40, 1:55, 2:10]
, так далее.
Но это чувствует себя дерганным и избегает использованияd3.format
, Есть ли лучший способ сделать эти этикетки?