d3.js - directed - d3js heatmap

¿Cómo hago un formateador de ejes personalizado para horas y minutos en d3.js?

Question

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 formato hh:mm , y no puedo encontrar una manera de hacerlo de forma limpia 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 los elementos de text después de que se hayan generado, y anularlos 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 genera señales de eje como [1:40, 1:55, 2:10] , etc.

Pero esto parece una tontería y evita el uso de d3.format . ¿Hay una mejor manera de hacer estas etiquetas?

Answer 1

Si tiene tiempo absoluto , probablemente desee convertir sus datos x en objetos de fecha de JavaScript en lugar de números simples, y luego desea usar d3.time.scale y d3.time.format . Un ejemplo de formato "hh: mm" para un eje sería:

d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%H:%M"));

Y en realidad, es posible que no necesite especificar un formato de tic en absoluto; Según el dominio de su escala y el número de tics, el formato de escala de tiempo predeterminado podría ser suficiente para sus necesidades. Alternativamente, si desea un control completo, también puede especificar los intervalos de marcación para la escala. Por ejemplo, para las garrapatas cada quince minutos, podría decir:

d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.minutes, 15)
    .tickFormat(d3.time.format("%H:%M"));

Si tiene tiempo relativo , es decir , duraciones (y, por lo tanto, tiene números que representan minutos en lugar de fechas absolutas), puede darles formato como fechas seleccionando una época arbitraria y convirtiéndola sobre la marcha. De esa manera puedes dejar los datos en sí mismos como números. Por ejemplo:

var formatTime = d3.time.format("%H:%M"),
    formatMinutes = function(d) { return formatTime(new Date(2012, 0, 1, 0, d)); };

Dado que solo se mostrarán los minutos y las horas, no importa la época que elija. Aquí hay un ejemplo que usa esta técnica para formatear una distribución de duraciones:

• http://bl.ocks.org/3048166