X-axis Text Labels Not Aligned With Bars In D3.js

I'm using a D3.js histogram layout, and the x axis text labels are not aligning to their proper positions directly underneath their respective bar. They seem to be running on diffe

Solution 1:

Your data values were in the range from 1 to 20. Your code was creating 10 bins over that range. Each bin had a dx = 1.9 = (20 - 1) / 10. This result in bin thresholds of 1, 2.9, 4.8, 6.7, ..., 18.1, 20. Your code was resulting in tick values of 2, 4, 6, ..., 18, 20. Since bin thresholds were spaced at intervals of 1.9 and the tick values were spaced intervals of 2.0, the bars did not align with the tick marks.

You could use the following code to create tick marks at the right edge of each bar.

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickValues(bins.map(function (bin) { returnbin.x + bin.dx; }))
    .tickFormat(d3.format(".1f"));