D3.js d3轴刻度对齐

我有一个d3条形图，轴刻度线在条形图下方居中（如我所料）。在本例中，我实际上希望左对齐轴标记，并使标记位于条的左边缘下方。可能吗

编辑：用于构建轴的Javascript

// note width is just the width of the chart
var xScale = d3.scale.ordinal().rangeRoundBands([0,width], .1); 
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");

---

为什么不创建一个新的比例

var padding = .1;

var axisScale = d3.scale.linear()
  .domain([0, n])
  .range([0 + padding, WIDTH + padding]);

---

其中，

n

是柱状图中的条数。

我认为在将轴添加到图形中时，应该对其进行调整

尝试（假设图形名为svg）：

---

在我的实验中，这会将记号移到每个带的开头，并将文本保持在每个带的中心。

这里是向左对齐记号的示例

这样做的目的是，在创建记号后，收集并对齐记号：

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
  .selectAll("text")
    .attr("y", 6)
    .attr("x", 6)
    .style("text-anchor", "start");

---

你真的需要蜱吗？您可以将记号的大小设置为零（

axis.tickSize（0）；

），只需使用图表中每个条下面的记号文本。我实际上想显示您为JS提供的关于如何构造x轴的记号扫描？我已经发布了它。我找到了一种解决方法，实际上我有两个x轴，一个显示刻度/标签，并使用显式范围而不是范围标注栏，另一个x轴仅显示具有范围标注栏的x轴线。这似乎完成了我试图做的事情，但似乎有点粗糙。

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
  .selectAll("text")
    .attr("y", 6)
    .attr("x", 6)
    .style("text-anchor", "start");