Chart bars not aligning with x axis values in d3.js

Question

Trying to learn and implement d3.js for the first time.

In the fiddle, we needed to reduce the width of each bar from

.attr('width', xScale.rangeBand()) line 46

to

.attr('width', '10') line 50

When doing so, the horizontal x axis labels are getting dis-aligned with vertical bars which is not needed.

Tried to see a few solutions:

• We're unable to see tickValues anywhere in my code.
• Unable to understand where to put SVG-Text
• We do not wish to hide the x axis labels
• Ours is numeric, they're discussing about date time kind of axis

Any suggestions, kind folks?

Answer 1

Try this code:

.rangeBands([0, width], someValue)