d3.js - d3 轴刻度对齐

Question

我有一个 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");

Answer 1

这是左对齐刻度的示例。

http://bl.ocks.org/mbostock/6186172

这个想法是，在你创建刻度后，你收集它们并对齐它们:

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");