title: Change the ticks on x-axis
body: <p>I am trying to figure out d3.js. While defining the axis, How can I get custom labeling on x-axis. For example, the default labeling I get is:</p>
  
  <pre><code>|------|------|------|------|------|------|
  20    30     40     50     60     70     80
  </code></pre>
  
  <p>Whereas, I want something like:</p>
  
  <pre><code>|------|------|------|------|------|------| ....
  20    26      32    38     44     50     56
  </code></pre>
  
  <p>I am currently learning it and working on code (slightly modified) from official examples supplied:</p>
  
  <pre><code>var xAxis = d3.svg.axis().scale(x).tickPadding(7).orient("bottom");
  var yAxis = d3.svg.axis().scale(y).tickPadding(5).orient("left");
  </code></pre>