Javascript 未捕获的TypeError:xScale.rangeBand不是d3.js中的函数

尝试按照中的操作生成条形图

d3.min.js

参考工作正常

但是，当我尝试使用以下方法实施时：

路径由Visual Studio的ASP.NET项目工具提供

D3条形图({
元素：“#条形图”，
数据源：[10,20,220,240,270,300,330,370,410,30,40,50,60,70,80,90,100,110,120，
135, 150, 165, 180, 200],
});
函数D3条形图（chartConfig）{
var dataSource=chartConfig.dataSource；
var-margin={顶部：30，右侧：10，底部：30，左侧：50}；
变量高度=400-margin.top-margin.bottom，
宽度=720-margin.left-margin.right，
杆宽=30，
气压偏移=10；
动态彩色；
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（chartConfig.dataSource）]）
.范围（[0，高度]）
var xScale=d3.scaleBand（）
.domain（d3.range（0，chartConfig.dataSource.length））
.范围（[0，宽度]）
var colors=d3.scaleLinear（）
.domain（[0，chartConfig.dataSource.length]）
.范围（['红色'，'绿色']））
var awesome=d3.select（chartConfig.element）.append（'svg'）
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））
.selectAll（'rect'）.data（chartConfig.dataSource）
.enter（）.append（'rect'）
.风格({
“填充”：函数（数据，i）{
返回颜色（i）；
}“笔划”：“31708f”，“笔划宽度”：“5”
})
.attr（'width'，xScale.rangeBand（））
.attr（'x'，函数（数据，i）{
返回xScale（i）；
})
.attr（'height'，0）
.attr（'y'，高度）
.on（'mouseover'，函数（数据）{
dynamicColor=this.style.fill；
d3.选择（本）
.style（'填充'，'棕色'）
})
.on（'mouseout'，函数（数据）{
d3.选择（本）
.style（'fill'，dynamicColor）
})
太棒了。过渡（）
.attr（'height'，函数（数据）{
返回yScale（数据）；
})
.attr（'y'，函数（数据）{
返回高度-yScale（数据）；
})
.延迟（功能（数据，i）{
返回i*20；
})
.期限（2000年）
.ease（“弹性”）
var verticalGuideScale=d3.scale.linear（）
.domain（[0，d3.max（chartConfig.dataSource）]）
.范围（[高度，0]）
var vAxis=d3.svg.axis（）
.刻度（垂直导轨刻度）
.orient（'左'）
.滴答声（10）
var verticalGuide=d3.select（'svg'）.append（'g'））
vAxis（垂直导向）
verticalGuide.attr（'transform'，'translate（'+margin.left+'，'+margin.top+'））
verticalGuide.selectAll（'路径'）
.style（{fill:'none'，stroke:#3c763d}）
垂直导航。选择全部（'行'）
.style（{stroke:#3c763d}）
var hAxis=d3.svg.axis（）
.scale（xScale）
.orient（'底部'）
.ticks（chartConfig.dataSource.size）
var horizontalGuide=d3.select（'svg'）.append（'g'））
hAxis（水平向导）
horizontalGuide.attr（'transform'、'translate（'+margin.left+'、'+（height+margin.top）+'））
水平向导。选择全部（'path'））
.style（{fill:'none'，stroke:#3c763d}）
水平向导。选择全部（'行'）
.style（{stroke:#3c763d}）；
}

---

这是您的小提琴，已更新为D3 4.x版：

主要变化：

对于使用具有

样式

和

属性

（而不是

样式

和

属性

）的对象，必须参考D3选择：

<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

宽度：

.attr('width', xScale.bandwidth())

对于轴：

var vAxis = d3.axisLeft(verticalGuideScale)
    .ticks(10)

var hAxis = d3.axisBottom(xScale)
    .ticks(chartdata.size)

对于宽松政策：

.ease(d3.easeElastic)

---

加上其他小改动（检查代码）。

您如何显示页面？通过本地web服务器还是通过文件？你用的是什么浏览器？Chrome的安全模型要求，如果直接访问而不是通过web服务器访问，则所有文件都必须位于同一目录中。当前通过web服务器，浏览器为Chrome。我不确定web服务器是否理解波浪号（~）字符。路径由Visual Studio的ASP.NET项目工具提供。下载的副本为D3 v4。您的代码仅适用于D3V3。

.ease(d3.easeElastic)