Bar Height change following Y Axis inversion in D3 Charts

I have a Bar Chart component in my Ember application and the Y axis scaled incorrectly (it has the lowest count at the top and the highest at the bottom).

I can flip the Y axis by changing .range[ 0, barHeight ] to .range[ barheight, 0] but this distorts the bars so they no longer represent the correct values.

I know that the bar height needs to be changed but I am not sure how to do this within the component. Any help greatly appreciated:

Relevant Code:

 let svg = select(this.$('svg')[0]);
    this.set('svg', svg);
    let {
      width,
      height
    } = this.get('svg').node().getBoundingClientRect();

let padding = {
      top: 10,
      bottom: 30,
      left: 40,
      right: 0
    };

let barsHeight = height - padding.top - padding.bottom;
    this.set('barsHeight', barsHeight);

  // Y scale & axes
    let yScale = scaleLinear().range([ 0, barsHeight ]);
    this.set('yScale', yScale);
    this.set('yAxis', axisLeft(yScale));
    this.set('yAxisContainer', svg.append('g')
      .attr('class', 'axis axis--y')
      .attr('transform', `translate(${padding.left}, ${padding.top})`)
    );
 //Update the scales on chart render
this.get('yScale').domain([ Math.max(...counts), 0 ]);

//Update the Axis
  this.get('yAxis').scale(this.get('yScale'));
    this.get('yAxisContainer').call(this.get('yAxis'));

//drawing the bars

  barsEnter
      .merge(barsUpdate)
      .transition()
      .attr('width', `${this.get('xScale').bandwidth()}px`)
      .attr('height', data => `${this.get('yScale')(data.count)}px`)
      .attr('x', data => `${this.get('xScale')(data.label)}px`)
      .attr('y', data => `${this.get('barsHeight') - this.get('yScale')(data.count)}px`)
      .attr('fill', data => this.get('colorScale')(data.count))
      .attr('opacity', data => {
        let selected = this.get('selectedLabel');
        return (selected && data.label !== selected) ? '0.5' : '1.0';
      })