¿Cómo hago un formateador de ejes personalizado para horas y minutos en d3.js?
Tengo un conjunto de datos que estoy graficando con d3.js. El eje x representa el tiempo (en minutos). Me gustaría mostrar este eje en unahh:mm
Formato, y no puedo encontrar una manera de hacer esto limpiamente dentro de d3.
Mi código de eje se ve como:
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.svg.axis()
.scale(x)
.orient('bottom'));
Lo que genera etiquetas en minutos que parecen[100, 115, 130, 140]
, etc.
Mi solución actual es seleccionar latext
Los elementos después de que se hayan generado, y los reemplaza con una función:
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;
});
Esto da como resultado tics de eje[1:40, 1:55, 2:10]
, etc.
Pero esto se siente una broma y evita el uso ded3.format
. ¿Hay una mejor manera de hacer estas etiquetas?