Skip to content Skip to sidebar Skip to footer
Home / D3.js / Javascript / Svg

Uncaught Typeerror: Xscale.rangeband Is Not A Function In D3.js

Post a Comment
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:

Solution 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:

<scriptsrc="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).

You may like these posts

Post a Comment for "Uncaught Typeerror: Xscale.rangeband Is Not A Function In D3.js"