D3 bar chart left aligned x-axis

Question

How do I retain the x-axis as 100% of the container width while maintaining left aligned ticks with some padding.

  this.xAxis = d3.scaleBand()
            .range([0, this.barWidth * this.data.length], 1);

If I change the range to .range([0, this.svgWidth]) , the width is correct but my ticks are evenly spread out which is not my desired outcome.

Answer 1

The second and third arguments are not accepted anymore in range when you use a band scale. Instead, you'll have to use paddingInner and paddingOuter .

So, change your snippet to this:

this.xAxis = d3.scaleBand()
    .range([0, this.svgWidth])
    .paddingInner(someValue)
    .paddingOuter(someValue);

Tweak with someValue until you find the desired outcome.