未捕获的类型错误:xScale.rangeBand不是d3.js中的函数
Uncaught TypeError: xScale.rangeBand is not a function in d3.js
按照Vegipt的教程生成条形图。
d3.min.js
参考效果良好。
然而,当我尝试使用实现下载的本地副本时
<script type="text/javascript" src="~/Scripts/d3/d3.min.js"></script>
路径由Visual Studio的ASP.NET项目工具自动生成
d3BarChart({
element: '#bar-chart',
dataSource: [10, 20, 220, 240, 270, 300, 330, 370, 410, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120,
135, 150, 165, 180, 200],
});
function d3BarChart(chartConfig) {
var dataSource = chartConfig.dataSource;
var margin = { top: 30, right: 10, bottom: 30, left: 50 };
var height = 400 - margin.top - margin.bottom,
width = 720 - margin.left - margin.right,
barWidth = 30,
barOffset = 10;
var dynamicColor;
var yScale = d3.scaleLinear()
.domain([0, d3.max(chartConfig.dataSource)])
.range([0, height])
var xScale = d3.scaleBand()
.domain(d3.range(0, chartConfig.dataSource.length))
.range([0, width])
var colors = d3.scaleLinear()
.domain([0, chartConfig.dataSource.length])
.range(['red', 'green'])
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')
.style({
'fill': function (data, i) {
return colors(i);
}, 'stroke': '#31708f', 'stroke-width': '5'
})
.attr('width', xScale.rangeBand())
.attr('x', function (data, i) {
return xScale(i);
})
.attr('height', 0)
.attr('y', height)
.on('mouseover', function (data) {
dynamicColor = this.style.fill;
d3.select(this)
.style('fill', 'brown')
})
.on('mouseout', function (data) {
d3.select(this)
.style('fill', dynamicColor)
})
awesome.transition()
.attr('height', function (data) {
return yScale(data);
})
.attr('y', function (data) {
return height - yScale(data);
})
.delay(function (data, i) {
return i * 20;
})
.duration(2000)
.ease('elastic')
var verticalGuideScale = d3.scale.linear()
.domain([0, d3.max(chartConfig.dataSource)])
.range([height, 0])
var vAxis = d3.svg.axis()
.scale(verticalGuideScale)
.orient('left')
.ticks(10)
var verticalGuide = d3.select('svg').append('g')
vAxis(verticalGuide)
verticalGuide.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
verticalGuide.selectAll('path')
.style({ fill: 'none', stroke: "#3c763d" })
verticalGuide.selectAll('line')
.style({ stroke: "#3c763d" })
var hAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(chartConfig.dataSource.size)
var horizontalGuide = d3.select('svg').append('g')
hAxis(horizontalGuide)
horizontalGuide.attr('transform', 'translate(' + margin.left + ', ' + (height + margin.top) + ')')
horizontalGuide.selectAll('path')
.style({ fill: 'none', stroke: "#3c763d" })
horizontalGuide.selectAll('line')
.style({ stroke: "#3c763d" });
}
<div id="bar-chart"></div>
它抛出以下错误:
未捕获类型错误:xScale.rangeBand不是函数
这是你的小提琴,更新到D3 4.x版本:https://jsfiddle.net/jnxh140f/
主要变化:
要使用具有styles
和attrs
(而不是style
和attr
)的对象,必须参考D3选择multi:
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
对于天平:
var yScale = d3.scaleLinear()
.domain([0, d3.max(chartdata)])
.range([0, height])
var xScale = d3.scaleBand()
.domain(d3.range(0, chartdata.length))
.range([0, width])
宽度:
.attr('width', xScale.bandwidth())
对于轴:
var vAxis = d3.axisLeft(verticalGuideScale)
.ticks(10)
var hAxis = d3.axisBottom(xScale)
.ticks(chartdata.size)
缓解:
.ease(d3.easeElastic)
再加上其他小改动(检查代码)。
相关文章:
- jQuery的等价物's'不是'D3.js中的选择器
- 如何在d3力布局中使直线而不是曲线
- D3选择html——传递函数时,索引从1开始,而不是从0开始
- 我如何才能让这个svg圆圈出现在我的d3路径上方,而不是下方
- d3转换从页面加载开始,而不是从模式弹出加载开始
- d3日历视图:如何将所有内容放在一个svg中,而不是放在几个svg中
- 点击浏览器的“后退”按钮显示的是JSON而不是HTML(使用Rails和d3.js)
- 使用D3.js的SVG圆周围的矩形之间的间隙不是通用的
- D3未捕获类型错误:path.data不是函数
- TypeError:undefined不是使用d3.map的对象
- D3:将鼠标滚轮重新映射为平移手势,而不是缩放手势
- 如何告诉D3使树状图垂直(自上而下),而不是从左到右
- d3.js voronoi.clipExtent()返回错误:undefined不是函数
- d3.js onclick事件在单击时使用变量的值,而不是在绘制时
- D3地图与geoJson美国地图工作,但不是世界
- 在 D3 中,高度过渡是从上到下进行的,而不是从下到上
- 当解析器不是逗号时,如何使用 d3 解析 csv 文件
- d3不是从阴谋中找到的
- D3不是从对象列表中渲染图形
- nvd3或d3不是默认的json格式