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

Question

我有一个带有序数刻度的x-axis，就像在这个例子中一样： http://bl.ocks.org/mbostock/3259783

如您所见，名为“apple”的第一个刻度从 x 轴的开头开始，最后一个“grapefruit”位于末尾。 我想要的是为第一个刻度留下一些填充，为最后一个刻度留下一些填充。

这就是我想要的轴（还要记住，这是一个序数比例，我认为它与时间比例或线性有点不同）

这是我的代码：

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

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

Answer 1

根据文档https://github.com/mbostock/d3/wiki/Ordinal-Scales，您可以指定序数刻度开始和结束处的填充“作为点间距的倍数”。

试试：

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