Comment puis-je personnaliser un axe formateur pendant des heures, & minutes d3.js?

J'ai un dataset je suis de dessin avec d3.js. L'axe x représente le temps (en minutes). J'aimerais affichage de cet axe dans un hh:mm format, et je ne peux pas trouver un moyen de le faire proprement dans d3.

Mon axe à quoi ressemble le code:

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

Qui génère les étiquettes dans les minutes qui ressemble à [100, 115, 130, 140], etc.

Ma solution actuelle est de sélectionner la text éléments après qu'ils ont été générés, et les écraser avec une fonction:

   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;
   });

Ce sorties axe tiques comme [1:40, 1:55, 2:10], etc.

Mais cela se sent janky et évite l'utilisation de d3.format. Est-il une meilleure façon de faire ces étiquettes?

InformationsquelleAutor matthewsteele | 2012-07-02
  1. 53

    Si vous avez temps absolu, vous voudrez probablement convertir votre x données JavaScript Date d'objets plutôt que de simples numéros, et que vous voulez utiliser d3.temps.l'échelle et d3.temps.format. Un exemple de "hh:mm" format pour un axe serait:

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

    Et en fait, vous ne pouvez pas besoin de spécifier une tique format; selon le domaine de votre échelle et le nombre de graduations, le par défaut format d'échelle de temps pourrait être suffisant pour vos besoins. Sinon, si vous voulez un contrôle complet, vous pouvez également spécifier la tique intervalles de l'échelle. Par exemple, pour les tiques toutes les quinze minutes, vous pourriez dire:

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

    Si vous avez temps relatif, c'est à dire durées, (et donc avoir des nombres représentant les minutes plutôt que de dates absolues), vous pouvez mettre en forme ces dates par la sélection d'un arbitraire de l'époque et de la conversion à la volée. De cette façon, vous pouvez laisser les données sous forme de nombres. Par exemple:

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

    Depuis seulement les minutes et les heures seront affichées, il n'importe pas quel époque vous chercher. Voici un exemple d'utilisation de cette technique pour formater une distribution des durées:

    • Je suppose que je devrais avez mentionné, mon cas d'utilisation est un histogramme (avec la mise à la poubelle des objets représentant de temps). Comme je suis sûr que c'est une échelle ordinale, je n'ai pas été en mesure de faire ce travail. Peut-être que je suis juste de mélanger les notions incompatibles? Voici mon code (axe en bas): pastebin.com/Wkcexcgr
    • J'ai édité ma réponse et ajout d'un exemple montrant comment utiliser la deuxième technique en conjonction avec un histogramme des durées.
    • De ce fait. Merci à tous pour votre aide! Vraiment étonné de ce que vous avez construit.
    InformationsquelleAutor mbostock