How to use the d3.axisBottom function in d3

this.svg.append("path")
        .data([this.data])
        .style("stroke", (d) => this.dashboardService.getObjectColor(graph, this.names[ll]))
        .attr("transform", "translate(" + [dx, dy] + ")")
        .style("fill", 'none')
        .style("stroke-width", 2)
        .attr("d", valueline);
    }

    // add the X Axis
    if (this.width>80) {
      this.xAxis = this.svg.append("g")
        .attr("class", "axisx")
        .attr("transform", "translate(" + [dx, this.height+dy] + ")")
        .style("font-size", fontSize/2+'px')
        .call(d3.axisBottom(this.xScale).ticks(5));
    }

    // add the Y Axis
    if (this.height>80) {
      this.yAxis = this.svg.append("g")
        .attr("class", "axisy")
        .attr("transform", "translate(" + [dx, dy] + ")")
        .style("font-size", fontSize/2+'px')
        .call(d3.axisLeft(this.yScale));

    if (graph.title) {
      let xt = -5
      let anchor = 'left'
      if (graph.centerTitle) {
        xt = (this.width)/2;
        anchor = 'middle'

c.defs.append("marker")
    .attr("id", "preview-arrowp")
    .attr("orient", "auto")
    .attr("viewBox", "0 0 10 10")
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("refX", 1)
    .attr("refY", 5)
    .append("path")
    .attr("d", "M 0 0 L 10 5 L 0 10 z");

  // make background grid
  c.grid = c.svg.append("g")
    .attr("class", "grid");
  c.grid.append("g").attr("class", "horizontal").call(
    d3.axisBottom(c.x)
      .tickValues(c.x.ticks(maxX - minX))
      .tickFormat("")
      .tickSize(c.height)
  )
    .selectAll("line")
    .attr("class", (d) => segmentBorders.indexOf(d) !== -1 ? "highlight" : "");

  c.grid.append("g").attr("class", "vertical").call(
    d3.axisLeft(c.y)
      .tickValues(c.y.ticks(6))
      .tickFormat("")
      .tickSize(-c.width)
  );

  const applyMargin = function (sel) {
    sel.style("left", margin.left + "px")

`0 0 ${this.width} ${this.height +
          this.margin.top +
          this.margin.bottom}`
      )
      .append("g")
      .attr(
        "transform",
        "translate(" + this.margin.left + "," + this.margin.top + ")"
      );

    // Draw axes with defined domain
    const xaxis = this.graph
      .append("g")
      .attr("transform", "translate(0," + this.height + ")")
      .call(
        d3.axisBottom(this.x).tickFormat(d => {
          return d % 2 ? d : "";
        })
      );

    xaxis.select(".domain").remove();

    const yaxis = this.graph.append("g").call(d3.axisLeft(this.y));

    if (that.isLoading) {
      yaxis.select(".domain").remove();
      xaxis.selectAll(".tick").remove();
      yaxis.selectAll(".tick").remove();
    }

    xaxis.selectAll("line").attr("stroke", this.color);
    xaxis.selectAll("text").attr("fill", this.color);

return k + "K";
                    }
                    else{
                        return Math.round(nr).toString();
                    }
                }
                else {
                    return Math.round(nr).toString();
                }
            })
            .tickSize(this.mainGraphState.innerWidth)
            .scale(this.mainGraphState.sent.yCongestionScale)

        // The recovery x axis uses the same x scale as the main graph's x axis
        // so that panning/zooming/etc also applies to the recovery graph
        this.recoveryGraphState.xAxis = d3.axisBottom(this.mainGraphState.sent.xScale)
            .tickSize(-this.recoveryGraphState.innerHeight)
            .scale(this.mainGraphState.sent.xScale);

        this.recoveryGraphState.yAxis = d3.axisLeft(this.recoveryGraphState.yScale!)
            .tickSize(-this.recoveryGraphState.innerWidth)
            .scale(this.recoveryGraphState.yScale!);

        // Set the new current domains
        this.mainGraphState.sent.rangeX = [localXMin, localXMax];
        this.mainGraphState.sent.rangeY = [localMinY, localMaxY];
        this.mainGraphState.sent.congestionRangeY = this.mainGraphState.sent.originalCongestionRangeY;
        this.recoveryGraphState.rangeY = this.recoveryGraphState.originalRangeY;

        // Change the perspective back to what it originally was
        this.mainGraphState.useSentPerspective = useSentPerspective;
    }

setXAxis(noAnimation?: boolean) {
		const { bar: margins } = Configuration.charts.margin;
		const chartSize = this.getChartSize();
		const height = chartSize.height - margins.top - margins.bottom;

		const t = noAnimation ? this.getInstantTransition() : this.getDefaultTransition();

		const xAxis = d3.axisBottom(this.x).tickSize(0);
		let xAxisRef = this.svg.select("g.x.axis");

		// If the 

this.chartSVG.selectAll('g.axis.x-axis').remove()
    this.chartSVG.selectAll('.g-x-axis-text').remove()
    let svg = this.chartSVG.select('.chart-g')
    this.xScale = d3.scaleLinear().range([0, this.width])

    let min = !isNaN(parseInt(this.config.axes.x.min))
      ? this.config.axes.x.min
      : (this.hasData() ? this.getMinX() : this.DEFAULT_MIN_X);

    let max = !isNaN(parseInt(this.config.axes.x.max))
      ? this.config.axes.x.max
      : (this.hasData() ? this.getMaxX() : this.DEFAULT_MAX_X);

    this.xScale.domain([min, max])

    this.xAxis = d3.axisBottom(this.xScale)
    if(typeof this.config.axes.x.tickFormat === 'function') {
      this.xAxis.tickFormat((x) =>  {
        return this.xAxisTickFormat(x)
      })
    }
    this.gX = svg.append("g")
      .attr("class", "axis x-axis")
      .attr('fill', 'none')
      .attr("transform", "translate(0," + this.height + ")")
      .call(this.xAxis)
      .on('mouseenter', () => {
        this.hideMouseIndicators()
      })
    if(this.zoomTransform.rescaleX)
      this.gX.call(this.xAxis.scale(this.zoomTransform.rescaleX(this.xScale)));
    // text label for the x axis

// Set scales
		const x = D3.scaleLinear()
			.range([0, width])
			.domain(D3.extent(data, d => d.index));

		const y = D3.scaleLinear()
			.range([height, 0]);
		// ~ Handle axis styling for edge case of only one data point ~
		if (data.length === 1) {
			y.domain([0, D3.max(data, d => d.amount) * 2]);
		} else {
			y.domain(D3.extent(data, d => d.amount));
		}

		// Add axes
		const xAxis = D3.axisBottom()
			.ticks(tickAmount)
			.tickSize(0)
			.tickFormat(d => formatLabelDate(data[d].date))
			.scale(x);

		const yAxis = D3.axisLeft()
			.ticks(6)
			.tickSize(0)
			.scale(y);

		canvas.append('g')
			.attr('class', 'x axis')
			.attr('transform', `translate(0,${height})`)
			.call(xAxis);

		canvas.append('g')

.data(data)
                .enter()
                .append("line")
                .attr("x1", lineConfig.x1)
                .attr("y1", lineConfig.y1)
                .attr("x2", lineConfig.x2)
                .attr("y2", lineConfig.y2)
                .attr("stroke", "#000")
                .style("stroke-width", 1)
                .attr("fill", "none");
        }

        var isRotate = false;
        plot.select(".x_axis")
            .attr("transform", "translate(0," + gHeight + ")")
            .call(d3.axisBottom(x)
                .tickSize(0)
                .tickFormat(function (d) {
                    if (isRotate == false) {
                        isRotate = UTIL.getTickRotate(d, (gWidth) / (xLabels.length - 1), tickLength);
                    }
                    return UTIL.getTruncatedTick(d, (gWidth) / (xLabels.length - 1), tickLength);
                })
                .tickPadding(10))

        plot.select(".y_axis")
            .call(d3.axisLeft(y).ticks(null, "s"))

        if (isRotate) {
            _local_svg.selectAll('.x_axis .tick text')
                .attr("transform", "rotate(-15)");
        }

const x = d3.scaleTime()
      .domain(timeExtent)
      .range([0, WIDTH]);

    const y = d3.scaleLinear()
      .domain([0, d3.max(imports, sourceImport => {
        const afterImport = sourceImport.DocumentCountAfterImport || 0;
        const inserted = sourceImport.insertedDocumentCount || 0;
        const updated = sourceImport.insertedDocumentCount || 0;
        const processed = sourceImport.processedDocumentCount || 0;
        return d3.max([processed, afterImport, inserted + updated]);
      })])
      .range([HEIGHT, 0]);

    chart.select('g.axis-x').call(d3.axisBottom(x).ticks(2));
    chart.select('g.axis-y').call(d3.axisLeft(y).ticks(3));

    const enteringBar = chart.selectAll('.bar')
      .data(imports)
      .enter()
    .append('g')
      .attr('class', 'bar');

    ['inserted', 'processed', 'updated'].forEach(type => {
      enteringBar.append('rect')
        .attr('class', type)
        .attr('x', -0.5 * BAR_WIDTH)
        .attr('width', BAR_WIDTH)
        .attr('fill', TYPES_TO_COLORS[type])
      .append('title');
    });