title: D3 Chart - Using tickValues for Time Gives "translate(NaN,0)"
body: <p>In my d3 line chart, I only want ticks for the plotted data. This proves to be a issue with time stamps though as I get:</p>
  
  <p><code>d3.js:7651 Error: &lt;g&gt; attribute transform: Expected number, "translate(NaN,0)".</code>. </p>
  
  <p>I thought to convert the strings to numbers in the <code>tickValues</code> array but I can not since it's got a colon. Any ideas?</p>
  
  <pre><code>          // Hard coded data
            scope.data = [
              {date: '12:00', glucoseLevel: 400},
              {date: '15:00', glucoseLevel: 200},
              {date: '18:00', glucoseLevel: 300},
              {date: '23:00', glucoseLevel: 400}
            ];
  
  
            var parseDate = d3.timeParse('%I:%M');
            scope.data.forEach(function(d) {
              d.date = parseDate(d.date);
              d.glucoseLevel = +d.glucoseLevel;
            });
  
  
  
            var x = d3.scaleTime()
              .range([0, width]);
  
            var xAxis = d3.axisBottom(x)
                          .tickValues(['12:00', '15:00', '18:00', '23:00']);
            // Add the X Axis
            svg.append('g')
              .attr('class', 'x axis')
              .attr('transform', 'translate(0,' + height + ')')
              .call(xAxis);
  </code></pre>