title: Display only values from the data set into X axis ticks
body: <p>I'm having trouble on this.. I'm working on a line chart using d3.js. I'm having trouble to display the X axis tick text that uses date values ONLY in the data spreadsheet. When I develop the line chart, I saw it automatic generated the date values between the values from the Data spreadsheet. Here is a quick example of the data.</p>
  
  <pre><code>date,close 
  16-Dec-12,53.98
  16-Dec-12,67.00
  16-Dec-12,89.70
  16-Dec-12,99.00
  16-Dec-12,130.28
  23-Dec-12,166.70
  23-Dec-12,234.98
  23-Dec-12,345.44
  23-Dec-12,443.34
  23-Dec-12,543.70
  23-Dec-12,580.13
  30-Dec-12,605.23
  30-Dec-12,622.77
  30-Dec-12,626.20
  30-Dec-12,628.44
  30-Dec-12,636.23
  30-Dec-12,633.68
  </code></pre>
  
  <p>So in this dataset, it has 3 different date values. </p>
  
  <p>In the D3 line chart, I want to display those only the 3 different date values which are Weeks in the x axis tick text. However, the chart is generated other dates in between those data date values. Example below.</p>
  
  <p><a href="https://i.stack.imgur.com/Lik2L.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lik2L.jpg" alt="You see it&#39;s displaying other dates in between"></a></p>
  
  <p>I'm trying to display like this that only display the date values from the Dataset.</p>
  
  <p><a href="https://i.stack.imgur.com/uwCYO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uwCYO.jpg" alt="I draw the line to cross out those dates"></a></p>
  
  <p>I hope this makes sense. Is this possible? I tried to use .tick() but it only display '16-Dec-12' which it confuses me. I'm pretty new into line charts for d3.js =/ </p>
  
  <p>here is my snippet code. I hope this helps.</p>
  
  <pre><code>function getExtent(member) {
              var extents = [];
              dataset.forEach(function(arry){
                  extents = extents.concat(d3.extent(arry,function(d){return d[member]}));
              }); 
              return d3.extent(extents);
          }
  
              var xScale = d3.time.scale().domain(getExtent('x')).range([0,width]);
          var yScale = d3.scale.linear().domain(getExtent('y')).range([height,0]);
  
          var xAxis = d3.svg.axis()
                      .scale(xScale)
                      .orient('bottom');
  xAxis.scale(xScale)
                      .tickFormat(d3.time.format('%b %d'));
  
          var yAxis = d3.svg.axis()
                      .scale(yScale)
                      .orient('left');
  
          var lineFunc = d3.svg.line()
                          .x(function(d){return xScale(d.x)})
                          .y(function(d){return yScale(d.y)})
                          .interpolate('linear');
          var g = svg.append('g')
                      .attr('width',width)
                      .attr('height',height)
                      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
  
          // Use this group for drawing the lines
          g.append('g')
              .attr('class', 'line-group');
  
          // Axes
          g.append('g')
              .attr('class', 'usps-multiline axis axis--x')
              .attr('transform', 'translate(0,' + height + ')')
              .call(xAxis)
              .selectAll("text")
              .attr("transform", "translate(-40,20) rotate(315)");
  
          g.append('g')
              .attr('class', 'usps-multiline axis axis--y')
              .call(yAxis);
  </code></pre>
  
  <p>**Please let me know if you can view the sample pic.</p>