d3.js - d3 axis tick alignment

Question

I have a d3 bar chart with, and the axis tick marks are centered below the bars (as I would expect). In this case, I would actually like to left align the axis ticks and have the ticks under the left edge of the bar. Is that possible?

EDIT: Javascript for constructing the axis

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

Answer 2

为什么不创造一个新的规模？

var padding = .1;

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

n直方图中的条数在哪里。

Answer 3

我认为当您将轴添加到图表时应该对此进行调整。

尝试（假设您的图表称为 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)");

在我的实验中，这会将刻度移动到每个波段的开头，并保留每个波段下方居中的文本。