title: D3 ordinal scale, left and right margins for tickvalues
body: <p>I have a <code>x-axis</code> with ordinal scale just like in this example:
  <a href="http://bl.ocks.org/mbostock/3259783" rel="nofollow noreferrer">http://bl.ocks.org/mbostock/3259783</a></p>
  
  <p>As you can see the first tick named 'apple' starts from the beginning of the x axis, and the last one 'grapefruit' is at the end.
  What I want is some padding left for the first ticks and padding right for the last ticks.</p>
  
  <p>This how I would like to have the axis (also keep in mind that this is an ordinal scale, and I think it's a bit different than time scale or linear)
  <a href="https://i.stack.imgur.com/OaUkZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OaUkZ.png" alt="enter image description here"></a></p>
  
  <p>This is my code:</p>
  
  <pre><code>var x = d3.scale.ordinal()
            .domain(["apple", "orange", "banana", "grapefruit"])
            .rangePoints([0, width]);
  
  var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");
  </code></pre>