mikewilliamson mikewilliamson - 3 months ago 333
Javascript Question

D3 4.0 rangeRoundBands equivalent?

I see a lot of D3 code that has something like this:

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);


As of D4 4.0
d3.scale.ordinal()
is now
d3.scaleOrdinal
and
rangeRoundBands
seems to be gone.

> d3.scaleOrdinal()

{ [Function: scale]
domain: [Function],
range: [Function],
unknown: [Function],
copy: [Function] }


What would the D3 v4 equivalent of this code (from Mike Bostock's bar chart example) be?

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

Answer

In D3 4.x rangeRoundBands was moved to the new Band scales:

d3.scaleBand()
    .range([range])
    .round([round]);

That's equivalent to:

d3.scaleBand()
    .rangeRound([range]);

Here is the API: https://github.com/d3/d3-scale#band-scales