Javascript D3条形图未捕获类型错误

我正在尝试使用d3版本4制作d3条形图，它给了我以下错误：未捕获类型错误：d3.scaleOrdinal（…）.domain（…）。rangeBands不是函数，我添加了代码片段，有人能帮我修复它吗

var bardata=[20,30,95,15]；
var高度=400，
宽度=600，
杆宽=50，
气压偏移=5；
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（bardata）]）
.范围（[0，高度]）；
var xScale=d3.scaleOrdinal（）
.域（d3.范围（0，数据长度））
.范围带（[0，宽度]）
d3.选择（“#图表”）.append（'svg'））
.attr（'width'，width）
.attr（'height'，height）
.style（'background'，'#C9D7D6'）
.selectAll（'rect'）。数据（bardata）
.enter（）.append（'rect'）
.style（'fill'，'#C61C6F'）
.attr（'width'，xScale.rangeBand（））
.attr（高度），功能（d）{
返回yScale（d）；
})
.attr（'x'，函数（d，i）{
返回xScale（i）；
})
.attr（'y'，函数（d）{
返回高度——yScale（d）；
})

折线图
D3图形

在（并非如此）新的D3 v4中：

ordinal.rangeBands和ordinal.rangeRoundBands方法已替换为ordinal scale的新子类：band scale。（）

因此，您必须在此处进行三项更改：

scaleBand

而不是

scaleOrdinal

xScale.bandwidth（）

而不是

xScale.rangeBands（）

设置刻度中的

填充

通过这些更改，这是您的代码：

var bardata=[20,30,95,15]；
var高度=400，
宽度=600，
杆宽=50，
气压偏移=5；
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（bardata）]）
.范围（[0，高度]）；
var xScale=d3.scaleBand（）
.域（d3.范围（0，数据长度））
.填充（0.1）
.范围（[0，宽度]）
d3.选择（'body'）。追加（'svg'））
.attr（'width'，width）
.attr（'height'，height）
.style（'background'，'#C9D7D6'）
.selectAll（'rect'）。数据（bardata）
.enter（）.append（'rect'）
.style（'fill'，'#C61C6F'）
.attr（'width'，xScale.bandwidth（））
.attr（高度），功能（d）{
返回yScale（d）；
})
.attr（'x'，函数（d，i）{
返回xScale（i）；
})
.attr（'y'，函数（d）{
返回高度——yScale（d）；
})

---

在V3和V4之间，API发生了相当大的变化<代码>rangeBands（）已被删除，@Sirko我可以用什么来代替？