D3 alignment

Question

I have a d3 chart with a chart, and the labels of the axis labels are centered below the bars (as I expected). In this case, I would like to align the axis of the ticks and have ticks under the left edge of the panel. Is it possible?

EDIT: Javascript for plotting an 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

I think this needs to be adjusted when you add an axis to your chart.

Try it (if your graph is called 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)"); 

In my experiments, this shifts ticks to the beginning of each strip and keeps the text centered under each strip.

Answer 2

Why not just create a new scale?

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

Where n is the number of bars in your histogram.

Answer 3

here is an example of left alignment.

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

The idea is that after creating ticks, you collect and align them:

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