title: How do I make a custom axis formatter for hours & minutes in d3.js?
body: <p>I've got a dataset I'm graphing with d3.js. The x axis represents time (in minutes). I'd like to display this axis in an <code>hh:mm</code> format, and I can't find a way to do this cleanly within d3.</p>
  
  <p>My axis code looks like:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>svg.append('g')
     .attr('class', 'x axis')
     .attr('transform', 'translate(0,' + height + ')')
     .call(d3.svg.axis()
       .scale(x)
       .orient('bottom'));
  </code></pre>
  
  <p>Which generates labels in minutes that looks like <code>[100, 115, 130, 140]</code>, etc.</p>
  
  <p>My current solution is to select the <code>text</code> elements after they've been generated, and override them with a function:</p>
  
  <pre class="lang-js prettyprint-override"><code>   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;
     });
  </code></pre>
  
  <p>This outputs axis ticks like <code>[1:40, 1:55, 2:10]</code>, etc.</p>
  
  <p>But this feels janky and avoids the use of <code>d3.format</code>. Is there a better way to make these labels?</p>