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

Question

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 down

Answer 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).