问题
Trying to generate bar chart by following Vegibit's tutorial in my fiddle.
The d3.min.js
reference works good.
However when I try to implement downloaded local copy by using:
<script type="text/javascript" src="~/Scripts/d3/d3.min.js"></script>
The path is auto generated by Visual Studio's ASP.NET project tool
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>
it throws the below error:
Uncaught TypeError: xScale.rangeBand is not a function
回答1:
Here is your fiddle, updated to D3 version 4.x: https://jsfiddle.net/jnxh140f/
Main changes:
For using objects with styles
and attrs
(not style
and attr
), you have to reference D3-selection-multi:
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
For the scales:
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])
For the width:
.attr('width', xScale.bandwidth())
For the axes:
var vAxis = d3.axisLeft(verticalGuideScale)
.ticks(10)
var hAxis = d3.axisBottom(xScale)
.ticks(chartdata.size)
For the easing:
.ease(d3.easeElastic)
Plus other small changes (check the code).
来源:https://stackoverflow.com/questions/38675348/uncaught-typeerror-xscale-rangeband-is-not-a-function-in-d3-js