D3刻度值，刻度值的左右边距

Question

I have a x-axis with ordinal scale just like in this example: http://bl.ocks.org/mbostock/3259783

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.

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)

This is my code:

var x = d3.scale.ordinal()
          .domain(["apple", "orange", "banana", "grapefruit"])
          .rangePoints([0, width]);

var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom");

Answer 1

Per the documenatation https://github.com/mbostock/d3/wiki/Ordinal-Scales you can specify the padding at the beginning and end of the ordinal scale "as a multiple of the spacing between points" .

Try:

var x = d3.scale.ordinal()
          .domain(["apple", "orange", "banana", "grapefruit"])
          .rangePoints([0, width], 1.0);