D3 v4 .rangeBand() equivalent

d3.js, javascript, svg

Solution

To find the width of the band in a band scale you have to use:

scale.bandwidth();

According to the API, `bandwidth()`:

Returns the width of each band.

Here is a demo:

var scale = d3.scaleBand()
  .domain(["foo", "bar", "baz", "foobar", "foobaz"])
  .range([0, 100]);
  
console.log("The width of each band is " + scale.bandwidth() + " pixels")

<script src="https://d3js.org/d3.v5.min.js"></script>

As you can see, the bandwidth depends on the number of elements in the domain, the extent of the range and the paddings. Here is the same snippet above, with paddings:

var scale = d3.scaleBand()
  .domain(["foo", "bar", "baz", "foobar", "foobaz"])
  .range([0, 100])
  .paddingOuter(0.25)
  
console.log("The width of each band is " + scale.bandwidth() + " pixels")

<script src="https://d3js.org/d3.v5.min.js"></script>

Problem

In D3 version 4.x, `d3.scale.ordinal()` has been changed to `d3.scaleOrdinal` and `d3.rangeRoundBands` has been changed to: ``` d3.scaleBand() .rangeRound([range]); ``` To find the width of a band, what is the equivalent of `d3.rangeBand()`?

Original source