How to use the d3-scale.scaleBand function in d3-scale

render() {
    if (!this.root) {
      this.setup();
    }
    const { data, noXTicks } = this.props;

    // keep old data rendered when data resets
    if (!data.length) {
      return;
    }

    const innerHeight = this.innerHeight;
    const innerWidth = this.innerWidth;

    // setup the scales
    const xScale = scaleBand().rangeRound([0, innerWidth]).paddingInner(0.1);
    const yScale = scaleLinear().range([innerHeight, 0]);

    // const xExtent = extent(data, d => d.value);
    xScale.domain(data.map(d => d.value));
    yScale.domain([0, max(data, d => d.count)]);

    // setup the axes
    this.xAxis.call(axisBottom(xScale).ticks(7));
    this.yAxis.call(axisLeft(yScale).ticks(4));
    if (noXTicks) {
      this.xAxis.selectAll('.tick').remove();
    }

    // render the bars
    let bars = this.countRects.selectAll('.bar').data(data);
    bars.exit().remove();

const self = this;

            const root = d3.select(this.$el).select('.bar-chart'),
                  margin = {top: 16, right: 0, bottom: 8, left: 0},
                  padding = 4;

            const svg = root.select('svg'),
                  g = svg.select('g').attr(
                    'transform', `translate(${margin.left},${margin.top})`
                  );
            g.selectAll('*').remove();

            const n = root.node(),
                  width = n.offsetWidth - margin.left - margin.right,
                  height = n.offsetHeight - margin.top - margin.bottom - padding,
                  x = scales.scaleBand().rangeRound([0, width]).padding(0.3),
                  y = scales.scaleLinear().rangeRound([height, 0]);

            const { min, max } = this.graphModel.getMinMax();

            x.domain(this.data.map((d) => d.month));
            y.domain([min, max]);

            svg.attr('width', n.offsetWidth).attr('height', n.offsetHeight);
            g.attr('width', width).attr('height', height);
            const lastMonth = this.data[this.data.length - 1].month;
            g.append('g').selectAll('.bar').data(this.data)
                .enter().append('rect')
                    .attr('x', (d) => x(d.month))
                    .attr('y', (d) => {
                        if (d.total >= 0) {
                            return y(d.total);

const { width, height } = this.props

        const data = this.props.data.reverse()
        const barColors = this.props.isLightTheme ? ['#a2b0cd', '#cad2e2'] : ['#566e9f', '#a2b0cd']
        const series = Object.keys(data[0].yValues)
        const xLabels = data.map(({ xLabel }) => xLabel)
        const yValues = data.map(({ yValues }) => yValues)
        const yHeights = data.map(({ yValues }) => Object.keys(yValues).reduce((acc, k) => acc + yValues[k], 0))

        if (!data.length) {
            return
        }

        const columns = xLabels.length

        const x = scaleBand()
            .domain(xLabels)
            .rangeRound([0, width])
        const y = scaleLinear()
            .domain([0, Math.max(...yHeights)])
            .range([height, 0])
        const z = scaleOrdinal()
            .domain(series)
            .range(barColors)
        const xAxis = axisBottom(x)

        const svg = select(this.svgRef!)
        svg.selectAll('*').remove()

        const barWidth = width / columns - 2

        const barHolder = svg

getInnerScale(): any {
    const height = this.groupScale.bandwidth();
    const spacing = this.innerDomain.length / (height / this.barPadding + 1);

    return scaleBand()
      .rangeRound([0, height])
      .paddingInner(spacing)
      .domain(this.innerDomain);
  }

updateScale() {
        switch (this.type()) {
            case "ordinal":
                this.d3Scale = d3ScaleBand().padding(0.1);
                if (this.ordinals_exists()) {
                    this.d3Scale.domain(this.ordinals());
                }
                this.parser = null;
                this.formatter = null;
                break;
            case "linear":
                this.d3Scale = d3ScaleLinear();
                if (this.low_exists() && this.high_exists()) {
                    this.d3Scale.domain([this.lowValue(), this.highValue()]);
                }
                this.parser = null;
                this.formatter = this.tickFormat_exists() ? d3Format(this.tickFormat()) : null;
                break;
            case "pow":
                this.d3Scale = d3ScalePow()

getYScale(): any {
    this.yDomain = this.getYDomain();
    const spacing = this.yDomain.length / (this.dims.height / this.barPadding + 1);

    return scaleBand()
      .rangeRound([0, this.dims.height])
      .paddingInner(spacing)
      .domain(this.yDomain);
  }

getXScale(): any {
    this.xDomain = this.getXDomain();
    const spacing = this.xDomain.length / (this.dims.width / this.barPadding + 1);
    return scaleBand()
      .range([0, this.dims.width])
      .paddingInner(spacing)
      .domain(this.xDomain);
  }

getYScale(): any {
    const spacing = this.groupDomain.length / (this.dims.height / this.barPadding + 1);

    return scaleBand()
      .rangeRound([0, this.dims.height])
      .paddingInner(spacing)
      .domain(this.groupDomain);
  }

case ScaleType.UTC:
      return scaleUtc<output>();
    case ScaleType.QUANTILE:
      return scaleQuantile<output>();
    case ScaleType.QUANTIZE:
      return scaleQuantize<output>();
    case ScaleType.THRESHOLD:
      return scaleThreshold();
    case ScaleType.BIN_ORDINAL:
      return scaleOrdinal&lt;{ toString(): string }, Output&gt;();
    case ScaleType.ORDINAL:
      return scaleOrdinal&lt;{ toString(): string }, Output&gt;();
    case ScaleType.POINT:
      return scalePoint&lt;{ toString(): string }&gt;();
    case ScaleType.BAND:
      return scaleBand&lt;{ toString(): string }&gt;();
    default:
      return undefined;
  }
}
</output></output></output>

private initSvg() {
        this.svg = d3.select('svg');

        this.width = +this.svg.attr('width') - this.margin.left - this.margin.right;
        this.height = +this.svg.attr('height') - this.margin.top - this.margin.bottom;
        this.g = this.svg.append('g').attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

        this.x = d3Scale.scaleBand()
            .rangeRound([0, this.width])
            .paddingInner(0.05)
            .align(0.1);
        this.y = d3Scale.scaleLinear()
            .rangeRound([this.height, 0]);
        this.z = d3Scale.scaleOrdinal()
            .range(['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56', '#d0743c', '#ff8c00']);
    }