Tengo un conjunto de datos estoy gráfica con d3.js. El eje x representa el tiempo (en minutos). Me gustaría mostrar este eje en un hh:mm formato, y no puedo encontrar una manera de hacer esto limpiamente dentro de d3.

Mi eje código parece:

svg.append('g')
   .attr('class', 'x axis')
   .attr('transform', 'translate(0,' + height + ')')
   .call(d3.svg.axis()
     .scale(x)
     .orient('bottom'));

Que genera etiquetas en los minutos que parece [100, 115, 130, 140], etc.

Mi solución actual es seleccionar el text elementos después de que se hayan generado, y los reemplace 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 salidas eje de las garrapatas como [1:40, 1:55, 2:10], etc.

Pero esto se siente janky y evita el uso de d3.format. Hay una manera mejor de hacer estas etiquetas?

1 Comentario

  1. 53

    Si usted tiene tiempo absoluto, es probable que desee convertir su x de datos de JavaScript Fecha de objetos, en lugar de simples números y, a continuación, usted desea utilizar d3.tiempo.escala y d3.tiempo.formato. Un ejemplo de «hh:mm» formato para un eje sería:

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

    Y, de hecho, usted no necesita especificar una garrapata formato a todos; dependiendo del dominio de la escala y el número de pasos, la por defecto la escala de tiempo de formato podría ser suficiente para sus necesidades. Alternativamente, si desea tener un control completo, también puede especificar la garrapata de los intervalos de la escala. Por ejemplo, para las garrapatas cada quince minutos, usted podría decir:

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

    Si usted tiene tiempo relativo, es decir, duraciones, (y por lo tanto tienen números que representan la cuestión de minutos en lugar de absolutas fechas), puede dar formato a estos como fechas por elegir arbitrariamente época y de la conversión sobre la marcha. De esa manera usted puede dejar los datos como números. Por ejemplo:

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

    Ya que sólo los minutos y las horas se muestran, no importa de qué época es usted elija. He aquí un ejemplo del uso de esta técnica para dar formato a una distribución de duraciones:

    • Supongo que debería haber mencionado, en mi caso de uso es un histograma (con la binned objetos que representan el tiempo). Como estoy bastante seguro de que este establece una escala ordinal, no he sido capaz de hacer este trabajo. Tal vez sólo estoy mezclando conceptos incompatibles? Aquí está mi código (eje en la parte inferior): pastebin.com/Wkcexcgr
    • He editado mi respuesta y se añade un ejemplo que muestra cómo utilizar la segunda técnica en conjunto con un histograma de las duraciones.
    • Este lo hizo. Gracias por toda su ayuda! Realmente sorprendido por lo que has construido.

Dejar respuesta

Please enter your comment!
Please enter your name here