How to use the d3-axis.axisLeft function in d3-axis

const yScale = scaleLinear().range([innerHeight, 0]);

    // filter out infinite values
    const filteredData = data.filter(d => d < Infinity && d > -Infinity);

    const xExtent = extent(filteredData);
    xScale.domain(xExtent);
    this.xAxis.call(axisBottom(xScale).ticks(7));

    const bins = histogram()
      .domain(xScale.domain())
      .thresholds(xScale.ticks(20))(filteredData);

    yScale.domain([0, max(bins, d => d.length)]);
    this.yAxis.call(axisLeft(yScale).ticks(4));

    let bars = this.countRects.selectAll('.bar').data(bins);
    bars.exit().remove();
    const barsEnter = bars.enter().append('g').attr('class', 'bar');

    const sampleBin = bins[1] || bins[0]; // first one can be smaller so use second if available
    const barWidth = Math.max(1, xScale(sampleBin.x1) - xScale(sampleBin.x0) - 1);
    barsEnter
      .append('rect')
      .attr('x', 1)
      .attr('width', barWidth)
      .style('fill', '#0bb');

    bars = bars.merge(barsEnter)
      .attr('transform', d => `translate(${xScale(d.x0)}, ${yScale(d.length)})`)
      .each(function eachBar(d) {

});
  }

  var eventTypes = ['render', 'resize', 'highlight', 'mark', 'brush', 'brushend', 'brushstart', 'axesreorder'].concat(keys(config));

  var events = dispatch.apply(_this$4, eventTypes),
      flags = {
    brushable: false,
    reorderable: false,
    axes: false,
    interactive: false,
    debug: false
  },
      xscale = scalePoint(),
      dragging = {},
      axis = axisLeft().ticks(5),
      ctx = {},
      canvas = {};

  var brush = {
    modes: {
      None: {
        install: function install(pc) {}, // Nothing to be done.
        uninstall: function uninstall(pc) {}, // Nothing to be done.
        selected: function selected() {
          return [];
        }, // Nothing to return
        brushState: function brushState() {
          return {};
        }
      }
    },

this.root
        .append('g')
        .attr('class', 'grid')
        .call(
          axisBottom(this.x)
            .tickSize(this.height)
            .tickFormat(() => ''),
        );
    }

    if (this.graphDataMerged.lineChart.axis.y.gridVisible) {
      this.root
        .append('g')
        .attr('class', 'grid')
        .call(
          axisLeft(this.y)
            .tickSize(-this.width)
            .tickFormat(() => ''),
        );
    }
  }

function mkAxis(scale, scaleType = 'log') {
    const axis = axisLeft()
        .scale(scale);

    if (scaleType === 'log') {
        axis.ticks(5)
            .tickFormat(currencyLogFormat);
    }

    if (scaleType === 'linear') {
        axis.ticks(5)
            .tickFormat(currencyFormat);
    }
    return axis;
}

.attr('class', 'axis axis--x')
      .attr('transform', 'translate(0,' + this.height + ')')
      .call(this.xAxis);

    this.svg.append('g')
      .attr('class', 'axis axis-line')
      .attr('transform', 'translate(0,' + this.height + ')')
      .call(d3_axis_bottom(this.x).ticks(0).tickSizeOuter(0));

    this.svg.append('g')
      .attr('class', 'axis axis--y')
      .call(this.yAxis);

    this.svg.append('g')
      .attr('class', 'axis axis-line')
      .call(d3_axis_left(this.y).ticks(0).tickSizeOuter(0));

    this.circles = this.svg.selectAll('circle')
      .data(this._getFormatedData(0))
      .enter()
      .append('circle')
      .attr('class', d => this._getCircleClass(d))
      .attr('r', 5)
      .attr('cx', d => this.x(d.x))
      .attr('cy', d => this.y(d.y));

    if (this.showTooltipCallback !== undefined) {
      this.circles.on('mousemove', function(d) {
        const selectedSwitcher = document.querySelector('.js-scatterplot-switcher-item.selected span');

        this.showTooltipCallback(
          d,

drawAxis() {
    this.xAxis.call(axisBottom().scale(x).ticks(Math.min(this.props.data.length, 30)));
    this.yAxis.call(axisLeft().scale(y));
  }
};

function drawYAxis(section, scale) {
    const yAxis = axisLeft()
        .ticks(5)
        .scale(scale);

    section
        .call(yAxis);
}

.selectAll('rect')
            .data(d => d)
            .enter().append('rect')
            .attr('x', d => this.x(d.data.State))
            .attr('y', d => this.y(d[1]))
            .attr('height', d => this.y(d[0]) - this.y(d[1]))
            .attr('width', this.x.bandwidth());

        this.g.append('g')
            .attr('class', 'axis')
            .attr('transform', 'translate(0,' + this.height + ')')
            .call(d3Axis.axisBottom(this.x));

        this.g.append('g')
            .attr('class', 'axis')
            .call(d3Axis.axisLeft(this.y).ticks(null, 's'))
            .append('text')
            .attr('x', 2)
            .attr('y', this.y(this.y.ticks().pop()) + 0.5)
            .attr('dy', '0.32em')
            .attr('fill', '#000')
            .attr('font-weight', 'bold')
            .attr('text-anchor', 'start')
            .text('Population');

        let legend = this.g.append('g')
            .attr('font-family', 'sans-serif')
            .attr('font-size', 10)
            .attr('text-anchor', 'end')
            .selectAll('g')
            .data(keys.slice().reverse())
            .enter().append('g')

function drawYAxis(yScale, container) {
    const yAxis = axisLeft(yScale);

    container.append('g')
        .attr('transform', `translate(${dimensions.margin.left}, ${dimensions.margin.top})`)
        .call(yAxis);
}