How to use the d3.axisLeft function in d3

private drawYAxis() {
        const range = d3.extent(this.internalValues, (datum, index, array) => {
            return datum.value;
        });
        const rangeOffset = (range[1] - range[0]) * 0.10;
        this.yScale = d3.scaleLinear()
            .domain([range[0] - rangeOffset, range[1] + rangeOffset])
            .range([this.height, 0]);

        this.yAxisGen = d3.axisLeft(this.yScale).ticks(5);

        // draw y axis
        this.graph.append('svg:g')
            .attr('class', 'y axis')
            .call(this.yAxisGen);

        // calculate
        // const labels = d3.select('.y.axis').selectAll('text');
        // if (labels instanceof Array && labels.length === 1) {
        //     this.maxLabelwidth = 0;
        //     labels[0].forEach((elem) => {
        //         debugger;
        //         if (elem.getBBox().width > this.maxLabelwidth) {
        //             this.maxLabelwidth = elem.getBBox().width;
        //         }
        //     });

drawAxesSVG(xScale, yScale, svg) {
    const { scatterplotYYaccessor, scatterplotXXaccessor } = this.props;
    svg.selectAll("*").remove();

    // the axes are much cleaner and easier now. No need to rotate and orient
    // the axis, just call axisBottom, axisLeft etc.
    const xAxis = d3
      .axisBottom()
      .ticks(7)
      .scale(xScale);

    const yAxis = d3
      .axisLeft()
      .ticks(7)
      .scale(yScale);

    // adding axes is also simpler now, just translate x-axis to (0,height)
    // and it's alread defined to be a bottom axis.
    svg
      .append("g")
      .attr("transform", `translate(0,${height})`)
      .attr("class", "x axis")
      .call(xAxis);

    // y-axis is translated to (0,0)
    svg
      .append("g")
      .attr("transform", "translate(0,0)")

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));
        y.domain([0, d3.max(normalized, (d) => d.frequency)]);

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

        g.append('g')
            .attr('class', 'axis axis--y')
            .call(d3.axisLeft(y).ticks(10, '%'))
            .append('text')
            .attr('transform', 'rotate(-90)')
            .attr('y', 6)
            .attr('dy', '0.71em')
            .attr('text-anchor', 'end')
            .text('Phase');

        g.selectAll('.bar')
            .data(normalized)
            .enter().append('rect')
            .attr('class', 'bar')
            .attr('x', (d) => x(d.name))
            .attr('y', (d) => y(d.frequency))
            .attr('width', x.bandwidth())
            .attr('height', (d) => {
                // position bottom of bar to base line height bars grow top down

updateAxes() {
    if (this.props.showAxes) {
      this.xAxis
        .call(d3.axisBottom(this.xScale)); // add x axis labels

      this.yAxis
        .call(d3.axisLeft(this.yScale)); // add y axis labels
    }
  }

.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');


      // 罫線・軸
      let axisBottom = d3
        .axisBottom(x)
        .tickSizeInner(-this.innerHeight)
        .tickSizeOuter(0)
        .tickFormat(d3.timeFormat('%H:%M'))
        .ticks(7);
      graphArea
        .select('.axis.x')
        .attr('transform', 'translate(0,' + this.innerHeight + ')')
        .call(axisBottom);

      let axisLeft = d3
        .axisLeft(y)
        .tickSizeInner(-this.innerWidth)
        .tickSizeOuter(0)
        .ticks(5);
      // 単位設定
      // axisLeft.tickFormat(this.valueTypeSettings().tickFormat);
      graphArea
        .select('.axis.y')
        .call(axisLeft);

      // 軸背景
      graphArea
        .select('.axis-background.y')
        .attr('d', `M0 0v${this.height} h${-this.margin.left} v${-this.height} Z`)
      graphArea
        .select('.axis-background.x')

depthChart
      .append('line')
      .attr('class', 'horizontal-lines')
      .attr('x1', drawParams.chartDim.tickOffset)
      .attr('y1', drawParams.yScale(tick))
      .attr('x2', drawParams.containerWidth - drawParams.chartDim.right)
      .attr('y2', drawParams.yScale(tick));
  });

  // Draw RightSide yAxis
  if (hasOrders) {
    const yTicks2 = depthChart.append('g').attr('id', 'depth_y_ticks');

    yTicks2
      .call(
        d3
          .axisLeft(drawParams.yScale)
          .tickValues(drawParams.yScale.ticks(tickCount))
          .tickSize(9)
          .tickPadding(4)
      )
      .attr(
        'transform',
        `translate(${drawParams.containerWidth +
          drawParams.chartDim.right}, 6)`
      )
      .selectAll('text')
      .text(d => d)
      .select('path')
      .remove();
  }
}

let data = this.state.performance,
            keys = this.state.nns
        //    keys = ["A", "B"]

        x.domain([0, 100])
        y.domain(data.map(((d: any) => d.dataset))).padding(0.1)
        y_group.domain(keys).rangeRound([0, y.bandwidth()])
        
        // axis
        g.append("g")
            .attr("class", "x axis")
       	    .attr("transform", "translate(0," + height + ")")
      	    .call(d3.axisBottom(x).ticks(5).tickFormat(null).tickSizeInner(-height))
        g.append("g")
            .attr("class", "y axis")
            .call(d3.axisLeft(y))
        
        // bar
        g.append("g")
            .selectAll("g")
            .data(data)
            .enter().append("g")
            .attr("transform", (d: any) => "translate(0," + y(d.dataset) + ")")
            .selectAll("rect")
            .data(function(d) { return keys.map(function(key: string) { return {key: key, value: d[key]}; }); })
            .enter().append("rect")
                .attr("class", (d: any) => "bar " + String(d.key))
                .attr("x", 0)
                .attr("height", y_group.bandwidth())
                .attr("y", (d: any) => String(y_group(d.key)))
                .attr("width", (d: any) => String(x(d.value)))
                .attr("fill", (d: any) => String(color(d.key)))

.attr('fill', '#fff')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

  svg
    .append('text')
    .attr('y', 0 - margin.top)
    .attr('x', width / 2)
    .attr('dy', '1em')
    .style('text-anchor', 'middle')
    .style('fontSize', '1.1rem')
    .style('fontWeight', '500')
    .attr('fill', yAxisStyle.textFill)
    .text(title);

  const yG = svg.append('g').call(
    d3
      .axisLeft(y)
      .ticks(Math.min(4, maxY))
      .tickSize(-chartWidth)
      .tickSizeOuter(0)
  );

  yG.selectAll('path').style('stroke', 'none');
  yG.selectAll('line').style('stroke', yAxisStyle.stroke);
  yG.selectAll('text')
    .style('fontSize', yAxisStyle.fontSize)
    .style('fill', yAxisStyle.textFill);

  svg
    .append('text')
    .attr('transform', 'rotate(-90)')
    .attr('y', 0 - margin.left)

plot.append("g")
            .attr("class", "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.append("g")
            .attr("class", "y_axis")
            .call(d3.axisLeft(y).ticks(null, "s"))

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

        UTIL.setAxisColor("", true, "", true, _local_svg);


        if (!_print) {
            var confirm = $(me).parent().find('div.confirm')
                .css('visibility', 'hidden');

            var _filter = UTIL.createFilterElement()
            $('#' + parentContainer.attr('id')).append(_filter)

const transcriList = processedData.get('transcriList');
        const metaboloList = processedData.get('metaboloList');
        const proteomiList = processedData.get('proteomiList');

        const yearSet = processedData.get('yearSet');

        const x0 = d3.scaleTime().range([0, width - 30]);
        const y0 = d3.scaleLinear().range([height - heightOffset, 0]);
        const y1 = d3.scaleLinear().range([height - heightOffset, 0]);
        const nYearsToDisplay = width / 50;
        const toDisplay = Math.round(yearSet.size / nYearsToDisplay);
        const xAxis = d3.axisBottom(x0)
            .ticks(yearSet.size + 2).tickFormat(function (d: any, i: number) {
                return (i % toDisplay === 0) ? d.getFullYear() : '';
            });
        const yAxisLeft = d3.axisLeft(y0).ticks(1);
        const yAxisRight = d3.axisRight(y1).ticks(1);
        const yLine = d3.scaleLinear().range([15, 0]);
        const yNavLine = d3.axisBottom(yLine).ticks(0);


        const minpointer = processedData.get('minYear');
        const max_G_T = processedData.get('max_G_T');
        const max_M_P = processedData.get('max_M_P');
        x0.domain([new Date(Number(minpointer) - 1, 0, 0), new Date()]);

        y0.domain([0, Number(max_G_T)]);
        y1.domain([0, Number(max_M_P)]);


        const valueline = d3.line()
            .x(d => {return x0(new Date(d['year'], 0, 0)); })