I am trying to migrate my code from D3 version 3 to version 4.

Here is my code for version 3:

this.x = d3.scale.linear().range([0, this.width]);
this.y = d3.scale.ordinal().rangeRoundBands([-20, this.yItemsHeight], .1, 1);
this.xAxis = d3.svg.axis().scale(this.x).orient("top");
this.yAxis = d3.svg.axis().scale(this.y).orient("left");

...

this.svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return that.xShift; })
    .attr("height", this.y.rangeBand())
    .attr("y", function(d) { return that.y(d[that.columns[0]]); })
    .attr("width", function(d) { return that.x(d[that.columns[1]]); })
    .on('mouseover', this.tip.show)
    .on('mouseout', this.tip.hide);`

Full code: jsfiddle.

Here what I did during migration:

this.x = d3.scaleBand().rangeRound([-2, that.width]).padding(.1).paddingOuter(1);
this.y = d3.scaleLinear().range([this.height, 0]);
this.xAxis = d3.axisTop(this.x);
this.yAxis = d3.axisLeft(this.y);

...

this.svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return that.xShift; })
    .attr("height", this.y.rangeBand())
    .attr("y", function(d) { return that.y(d[that.columns[0]]); })
    .attr("width", function(d) { return that.x(d[that.columns[1]]); })
    .on('mouseover', this.tip.show)
    .on('mouseout', this.tip.hide);

Full code: jsfiddle.

But it still does not work with Uncaught TypeError: this.y.rangeBand is not a function at InvertedBarChart.initAxes (chart.js:330).

Could you please suggest how to change it? Thanks

I am trying to migrate my code from D3 version 3 to version 4.

Here is my code for version 3:

this.x = d3.scale.linear().range([0, this.width]);
this.y = d3.scale.ordinal().rangeRoundBands([-20, this.yItemsHeight], .1, 1);
this.xAxis = d3.svg.axis().scale(this.x).orient("top");
this.yAxis = d3.svg.axis().scale(this.y).orient("left");

...

this.svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return that.xShift; })
    .attr("height", this.y.rangeBand())
    .attr("y", function(d) { return that.y(d[that.columns[0]]); })
    .attr("width", function(d) { return that.x(d[that.columns[1]]); })
    .on('mouseover', this.tip.show)
    .on('mouseout', this.tip.hide);`

Full code: jsfiddle.

Here what I did during migration:

this.x = d3.scaleBand().rangeRound([-2, that.width]).padding(.1).paddingOuter(1);
this.y = d3.scaleLinear().range([this.height, 0]);
this.xAxis = d3.axisTop(this.x);
this.yAxis = d3.axisLeft(this.y);

...

this.svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return that.xShift; })
    .attr("height", this.y.rangeBand())
    .attr("y", function(d) { return that.y(d[that.columns[0]]); })
    .attr("width", function(d) { return that.x(d[that.columns[1]]); })
    .on('mouseover', this.tip.show)
    .on('mouseout', this.tip.hide);

Full code: jsfiddle.

But it still does not work with Uncaught TypeError: this.y.rangeBand is not a function at InvertedBarChart.initAxes (chart.js:330).

Could you please suggest how to change it? Thanks

• javascript
• d3.js

1 Answer 1

For this error Uncaught TypeError: this.y.rangeBand is not a function at InvertedBarChart.initAxes (chart.js:330).

In v4, you need to use

y.bandwidth()

instead of

y.rangeBand()