D3.js v4 - set padding for bar chart

Question

I'm trying to add padding to my bar chart in D3.js v4.

In v3, it was done in the following way:

var x = d3.scaleOrdinal()
    .domain(["a", "b", "c"])
    .rangeRoundBands([0, width], 0.1);

However, in v4, rangeRoundBands was eliminated. I know that the equivalent code in v4 (without padding) is:

var x = d3.scaleBand()
    .domain(["a", "b", "c"])
    .range([0, width]);

According to this, we should use band.padding to set the padding. So I tried this:

var x = d3.scaleBand()
    .domain(["a", "b", "c"])
    .range([0, width])
    .padding(0.1);

But that doesn't seem to make an impact. What am I doing wrong?

Answer 1

In D3 V4.

This is how you define the axis:

var x = d3.scaleBand()
    .range([0, width])
    .round(true)
    .padding(.1);//set padding like this
//set the domain like this
x.domain(data.map(function(d) { return d.letter; }));

//define the X axis like this

var xAxis = d3.axisBottom()
    .scale(x);

working bar chart d3 v4 sample here