What is the equivalent to `rangeBands` in D3 V5?

Asked May 02 '19 at 02:56

Active May 02 '19 at 03:07

Viewed 1,970 times

I'm converting a D3 script from V3 and V5.

In the V3 script, it uses rangeBands like this

width = 510
height = 570

var grpcnts = {
    met: { '1960': 0, '1970': 0, '2010': 0, label: "First Met", x: 1, y: 1 },
    romantic: { '1960': 0, '1970': 0, '2010': 0, label: "Romantic", x: 2, y: 1 },
    lived: { '1960': 0, '1970': 0, '2010': 0, label: "Live Together", x: 3, y: 1 },
    married: { '1960': 0, '1970': 0, '2010': 0, label: "Married", x: 4, y: 3 },
}

var x = d3.scale.ordinal()
    .domain([1950, 1970, 1980, 2010])
    .rangeBands([0, width]);

var y = d3.scale.ordinal()
    .domain(d3.keys(grpcnts))
    .rangeBands([height, 0]);

I tried to replace it with bandwidth() according to this thread, but that served this error.

Uncaught TypeError: d3.scaleOrdinal(...).domain(...).bandwidth is not a function

I also tried range, but that didn't do it either. What's the right replacement for rangeBands in V5?

Please see the section right above this for reasons why this is not a duplicate.

edited May 02 '19 at 03:07

asked May 02 '19 at 02:56

tadon11Aaa

Hi Gerardo, like I mention, I tried to replace bandwidth according to the answer in the other post but it serves me a type error that says bandwidth is not a function – tadon11Aaa May 02 '19 at 03:06
Try using d3.scaleBand rather than d3.scaleOrdinal – Andrew Reid May 02 '19 at 04:00
Like this? `var y = d3.scaleBand() .domain(d3.keys(grpcnts)) .range([height, 0]);` – tadon11Aaa May 02 '19 at 04:02
Great. I looked at the docs and I think that's right https://github.com/d3/d3-scale/blob/master/README.md#scaleBand – tadon11Aaa May 02 '19 at 04:05
Could you glance at this? https://stackoverflow.com/questions/55945883/return-values-from-a-map-in-d3-v5 – tadon11Aaa May 02 '19 at 04:56

What is the equivalent to `rangeBands` in D3 V5?

0 Answers0