未捕获的TypeError:this.y.rangeBand在迁移到D3版本4后不是一个函数

Question

我正在尝试将我的代码从D3版本3迁移到版本4.

这是我的第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);`

完整代码:jsfiddle.

这是我在迁移过程中所做的:

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);

完整代码:jsfiddle.

但它仍然不适用于Uncaught TypeError:this.y.rangeBand不是InvertedBarChart.initAxes(chart.js:330)中的函数.

你能建议怎么改变吗？谢谢

Answer 1

对于这个错误 Uncaught TypeError: this.y.rangeBand is not a function at InvertedBarChart.initAxes (chart.js:330).

在v4中,您需要使用

y.bandwidth()

代替

y.rangeBand()