How do I get the width of a bar including padding in d3?

Question

I have an ordinal scale the width of the bar including the padding.

In this case it returns rangeBand returns 29.03 .

var x = d3.scale.ordinal()
    .domain([0, 1, 2])
    .rangeBands([0, 100], 0.1);
console.log(x.rangeBand());

If I have 0 padding it returns 33.33 .

How do I get the width including padding?

Answer 1

For d3.js v4, for a bar graph where you defined your x-scale with something like this:

var x = d3.scaleBand().range([0, n]).padding(0.25).domain( ... )

you get the actual width value of a bar+padding with x.step() and the width value of padding with x.padding() * x.step()

Answer 2

instead of hardcoding pass on the variable. for example

var padding =10;
var width = 100;
var rw = width + padding;

so your code will be

var x = d3.scale.ordinal()
    .domain([0, 1, 2])
    .rangeBands([0, rw ], 0.1);
console.log(x.rangeBand());