CODEWITHSUNDEEP
javascriptjqueryd3.js
jissylarry
jissylarry

Reputation: 61

D3 bar chart uncaught TypeError

I'm trying to make a d3 bar chart using d3 version 4 and it gives me the following error: Uncaught TypeError: d3.scaleOrdinal(...).domain(...).rangeBands is not a function, i added my code snippet, can anybody fix it for me?

var bardata = [20, 30, 95,15];
var height = 400,
    width = 600,
    barWidth = 50,
    barOffset = 5;

var yScale = d3.scaleLinear()
.domain([0, d3.max(bardata)])
.range([0, height]);

var xScale = d3.scaleOrdinal()
.domain(d3.range(0, bardata.length))
.rangeBands([0, width])

d3.select('#chart').append('svg')
.attr('width', width)
.attr('height', height)
.style('background', '#C9D7D6')
.selectAll('rect').data(bardata)
.enter().append('rect')
.style('fill', '#C61C6F')
.attr('width', xScale.rangeBand())
.attr('height', function(d){
    return yScale(d);
})

.attr('x', function(d,i){
    return xScale(i);
})
.attr('y', function(d){
    return height - yScale(d);
})
<!DOCTYPE html>
<html>

<head>
    <title>Line Chart</title>
    <meta charset="8-UTF">
    <link rel="stylesheet" src="css/style.css"> </head>

<body>
    <div class="container">
        <h2>D3 Graphic</h2>
       <div id="chart"></div>
    </div>
    <script src="js/d3.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

Upvotes: 1

Views: 1825

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

In the (not so) new D3 v4:

The ordinal.rangeBands and ordinal.rangeRoundBands methods have been replaced with a new subclass of ordinal scale: band scales. (source)

Thus, you have to do three changes here:

  1. scaleBand instead of scaleOrdinal
  2. xScale.bandwidth() instead of xScale.rangeBands()
  3. setting the padding in the scale

With those changes, this is your code:

var bardata = [20, 30, 95, 15];
var height = 400,
  width = 600,
  barWidth = 50,
  barOffset = 5;

var yScale = d3.scaleLinear()
  .domain([0, d3.max(bardata)])
  .range([0, height]);

var xScale = d3.scaleBand()
  .domain(d3.range(0, bardata.length))
  .padding(0.1)
  .range([0, width])

d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height)
  .style('background', '#C9D7D6')
  .selectAll('rect').data(bardata)
  .enter().append('rect')
  .style('fill', '#C61C6F')
  .attr('width', xScale.bandwidth())
  .attr('height', function(d) {
    return yScale(d);
  })

.attr('x', function(d, i) {
    return xScale(i);
  })
  .attr('y', function(d) {
    return height - yScale(d);
  })
<script src="https://d3js.org/d3.v4.min.js"></script>

Upvotes: 3

Related Questions