D3js v4: scaleOrdinal does not have the rangePoints()

Question

I'm migrating the parallel coordinates source code here to the newest d3js version (d3js 4.5.0). I'm stuck to this line:

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

It seems that in d3js v4 the rangePoints function does not exist anymore. I can change to d3.scaleOrdinal(), but it has only the range function, not the rangePoints function. Any clue on for this?

Answer 1

In D3 v4, two new scales were created: scaleBand and scalePoint, which now have some of the features that scale.ordinal had in version 3 (among them rangePoints).

It's documented in the changelog:

Similarly, the ordinal.rangePoints and ordinal.rangeRoundPoints methods have been replaced with a new subclass of ordinal scale: point scales. The following code in 3.x:

var x = d3.scale.ordinal()
.domain(["a", "b", "c"])
.rangePoints([0, width]);

Is equivalent to this in 4.0:

var x = d3.scalePoint()
.domain(["a", "b", "c"])
.range([0, width]);

Therefore, the scale you need here is scalePoint:

Point scales are a variant of band scales with the bandwidth fixed to zero. Point scales are typically used for scatterplots with an ordinal or categorical dimension.

Thus, change your scale to:

var x = scalePoint()
    .range([0, width])
    .padding(.1);

Pay attention to the padding: in a point scale, range accepts only the range array, not the padding anymore.