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()
?
scaleBand() function in D3. js is used to construct a new band scale with the domain specified as an array of values and the range as the minimum and maximum extents of the bands. This function splits the range into n bands where n is the number of values in the domain array.
A band scale is a type of ordinal scale. According to the D3 docs, ordinal scales are categorized by a discrete, rather than continuous, domain and range.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With