How to use the d3.scaleBand function in d3

compare.forEach((cp: any) => {
            console.log(cp)
            let svg = d3.select(`.CorpusCompare .tab${cp.idx}`).insert('svg')
                .attr('width', '100%')
                .attr('height', '100%')
                .style('margin-top', '20px')
                .append('g')

            let x = d3.scaleLinear().range([0, width]),
                y = d3.scaleBand().range([height, 0]),
                y_group = d3.scaleBand().padding(0.05)

            let g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + 0 + ')')
            //    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        
            let data = cp.performance,
                keys = cp.nns
            
            let min: number, max: number;
            min = Math.floor(Math.min.apply(null, data.reduce((prev: any, cur: any) => {
                return prev.concat(keys.map((k: string) => cur[k]))
            },                                                [])) * 0.9)
            max = Math.ceil(Math.max.apply(null, data.reduce((prev: any, cur: any) => {
                return prev.concat(keys.map((k: string) => cur[k]))
            },                                               [])) * 1.1)
            x.domain([min, max])

function updateScales(levelToUpdate) {
    console.log("Update scales");
    var before = performance.now();
    // yScales=[];
    var lastLevel = dataIs.length-1;

    console.log("Delete unnecessary scales")
    // Delete unnecessary scales
    yScales.splice(lastLevel+1, yScales.length);
    levelToUpdate = levelToUpdate!==undefined ? levelToUpdate : lastLevel;
    yScales[levelToUpdate] = d3.scaleBand()
      .range([y0, h-nn.margin - 30])
      .paddingInner(0.0)
      .paddingOuter(0);



    console.log("Compute representatives")
    var representatives = [];
    if (dataIs[levelToUpdate].length>h) {
      var itemsPerpixel = Math.max(Math.floor(dataIs[levelToUpdate].length / (h*2)), 1);
      console.log("itemsPerpixel", itemsPerpixel);
      dataIs[levelToUpdate].itemsPerpixel = itemsPerpixel;
      for (var i = 0; i< dataIs[levelToUpdate].length; i+=itemsPerpixel ) {
        representatives.push(dataIs[levelToUpdate][i]);
      }
    } else {

if (graphElement.empty()) {
            return;
        }
        graphElement.select('svg').remove();

        const margin = { top: 8, right: 20, bottom: 30, left: 40 };
        let width = 1024;
        let height = 200;
        graphElement.append('svg')
            .attr('width', width)
            .attr('height', height);

        const svg = graphElement.select('svg');
        width = +svg.attr('width') - margin.left - margin.right;
        height = +svg.attr('height') - margin.top - margin.bottom;
        const x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
        const y = d3.scaleLinear().rangeRound([height, 0]);
        const bottom = graphElement.property('offsetHeight') + margin.bottom;

        const g = svg.append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

        let normalized = [];
        let tooltipDiv = graphElement.append('div').attr('class', 'bar-chart-tooltip')
            .style('max-height', height + 'px');

        data.forEach((el) => {
            // normalize frequency ratio to float
            normalized.push({'name': el.name, 'frequency': +el.frequency / 100, 'patterns': el.patterns});
        });

        x.domain(normalized.map((d) => d.name));

// Slice calculation on circle
		angleSlice = (Math.PI * 2 / columnKeys.length);

		if (typeof radius === "undefined") {
			radius = Math.min(width, height) / 2;
		}

		if (typeof colorScale === "undefined") {
			colorScale = d3.scaleOrdinal()
				.domain(columnKeys)
				.range(colors);
		}

		if (typeof xScale === "undefined") {
			xScale = d3.scaleBand()
				.domain(columnKeys)
				.range([0, 360]);
		}

		if (typeof yScale === "undefined") {
			yScale = d3.scaleLinear()
				.domain(valueExtent)
				.range([0, radius])
				.nice();
		}
	}

chartH = height - (margin.top + margin.bottom);

		const { seriesNames, columnKeys, valueMax } = dataTransform(data).summary();
		const valueExtent = [0, valueMax];

		if (typeof yAxisLabel === "undefined") {
			yAxisLabel = seriesNames;
		}

		if (typeof colorScale === "undefined") {
			colorScale = d3.scaleOrdinal()
				.domain(columnKeys)
				.range(colors);
		}

		xScale = d3.scaleBand()
			.domain(columnKeys)
			.rangeRound([0, chartW])
			.padding(0.15);

		yScale = d3.scaleLinear()
			.domain(valueExtent)
			.range([chartH, 0])
			.nice();
	}

getScaleX() {
        return d3.scaleBand().range([0, this.props.width], 0.1);
    }

_textColor = [],
        _displayColor = [],
        _borderColor = [],
        _displayColorExpression = [],
        _textColorExpression = [],
        _fontSize = [],
        _print,
        broadcast,
        filterParameters,
        isLiveEnabled = false,
        _notification = false,
        _data,
        _isFilterGrid = false,
        _showSorting = true;

    var x = d3.scaleBand(), y = d3.scaleLinear();

    var _x = d3.scaleBand(), _y = d3.scaleLinear(), brush = d3.brushX();;

    var FilterControlHeight = 100;

    var margin = {
        top: 0,
        right: 0,
        bottom: 0,
        left: 45
    };

    var _local_svg, svgFilter, _Local_data, _originalData, _localLabelStack = [], legendBreakCount = 1;
    var _localXAxis,
        _localYAxis,
        _localXGrid,

createScaleY() {
    return d3
      .scaleBand()
      .domain(this.state.data)
      .range([0, this.props.height - OFFSETS.top - OFFSETS.bottom])
      .padding(0.1);
  }

parseFloat(computedStyle.paddingRight);
    const heightToUse = this.height;

    const localThis = this;

    if (!this.chartData) {
      return;
    } else {
      this.loggerService.log(`Render Chart - width=${widthToUse}, height=${heightToUse}, data: ${this.chartData} - ` +
        Array.isArray(this.chartData));
    }

    const xValuesRange = [0, d3.max(localThis.chartDataToUse)];
    localThis.xScale = d3.scaleLinear().rangeRound([0, widthToUse]).domain(xValuesRange);

    localThis.yScale = d3.scaleBand()
      .domain(d3.range(localThis.chartDataToUse.length).map(d => d.toString()))
      .range([heightToUse, 0 + 20])
      .round(true)
      .paddingInner(0.05);

    localThis.chart = d3.select(chartElement).append('svg')
        .attr('width', widthToUse)
        .attr('height',  heightToUse);

    /**
     * Define x-axis
     */
    localThis.xAxis = d3.axisTop(localThis.xScale)
      .ticks(10);

    /**

export function draw() {
    let yScale = d3.scaleBand();
    let xScale = d3.scaleBand();
    let seriesNames = [];
    let showValues = false;
    let yAxisAlign = 'right';
    let rem = 16;
    const colourScale = d3.scaleOrdinal()
        .domain(seriesNames);

    function chart(parent) {
        xScale.paddingInner(0);
        yScale.paddingInner(0);

        parent.attr('transform', d => `translate(0, ${yScale(d.name)})`)
            .attr('width', xScale.bandwidth());

        const block = parent.selectAll('g')