Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3 v4 .rangeBand() equivalent

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()?

like image 956
cpd Avatar asked Oct 17 '16 09:10

cpd


People also ask

What is a band scale D3?

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.

What is a band scale?

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.


1 Answers

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>
like image 93
Gerardo Furtado Avatar answered Sep 21 '22 02:09

Gerardo Furtado