D3.js scaleOrdinal doesn't support rangeRoundBands method
Instead of this:
var x = d3.scaleOrdinal()
.domain(data.map(function(d) { return d.name; }))
.rangeRoundBands([0, width], 0.1);
In d3 v4
It should have been:
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1);
working code here
Thanks for Cyril Cherian . 90% of this gentleman’s answer is correct.
The following are inspirational answers. I have passed the test on d3-5.7.2.
// old v3 code
var x = d3.scaleOrdinal()
.domain(data.map(function(d) { return d.name; }))
.rangeRoundBands([0, width], 0.1);
// new v4 code
var x = d3.scaleBand()
// pay attention here ! the next statement is necessary . It is not part of 【conversion from v3 to v4】
.domain(data.map(function(d) { return d.name; }))
// below is the 【conversion from v3 to v4】
.rangeRound([0, width])
.padding(0.1);