Wie erstelle ich einen benutzerdefinierten Achsenformatierer für Stunden und Minuten in d3.js?

Ich habe einen Datensatz, den ich mit d3.js zeichne. Die x-Achse repräsentiert die Zeit (in Minuten). Ich möchte diese Achse in einem anzeigenhh:mm Format, und ich kann keinen Weg finden, dies sauber in d3 zu tun.

Mein Achsencode sieht so aus:

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

Wodurch in Minuten Etiketten erzeugt werden, die aussehen[100, 115, 130, 140], usw.

Meine derzeitige Lösung ist die Auswahl dertext Elemente, nachdem sie generiert wurden, und überschreiben Sie sie mit einer Funktion:

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

Dies gibt Achsen-Ticks wie aus[1:40, 1:55, 2:10], usw.

Aber das fühlt sich nervös an und vermeidet den Gebrauch vond3.format. Gibt es eine bessere Möglichkeit, diese Etiketten herzustellen?

Antworten auf die Frage(1)

Ihre Antwort auf die Frage