¿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?

Respuestas a la pregunta(1)

Su respuesta a la pregunta