Uncaught TypeError: xScale.rangeBand is not a function in d3.js

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></div>

it throws the below error:

Uncaught TypeError: xScale.rangeBand is not a function

1 Answer

Here is your fiddle, updated to D3 version 4.x:

Main changes:

For using objects with styles and attrs (not style and attr), you have to reference D3-selection-multi:

<script src=""></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).