小编vvs*_*vsh的帖子

我正在尝试将我的代码从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()) …