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

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

var padding = .1;

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

其中n是直方图中的条数。

Answer 2

我认为在您将图表添加到图表时应该调整此项。

尝试（假设您的图形称为svg）：

var bandSize = xScale.rangeBand();

svg.append("svg:g")
 .attr("transform", "translate(-" + bandSize + "," + h + ")")
 .call(xAxis)
 .selectAll("text")
   .style("text-anchor", "start")
   .attr("transform", "translate(" + bandSize + ", 0)");

在我的实验中，这会将刻度线移动到每个波段的开头，并保留以每个波段为中心的文本。

Answer 3

这是左对齐刻度线的示例。

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