How to use the d3-selection/src/select function in d3-selection

const circles = this.data.datasets.map((dataset, i) =>
      select(graphPart)
        .append('circle')
        .style(
          'stroke',
          this.options.dataColors[i] ? this.options.dataColors[i] : colors[i]
        )
        .style(
          'fill',
          this.options.dataColors[i] ? this.options.dataColors[i] : colors[i]
        )
        .attr('r', 3.5)
        .style('visibility', 'hidden')
    )

    select(graphPart)
      .append('rect')
      .attr('width', this.width)
      .attr('height', this.height)
      .attr('fill', 'none')
      // .attr('stroke', 'black')
      .on('mouseover', () => {
        circles.forEach(circle => circle.style('visibility', 'visible'))
        verticalLine.style('visibility', 'visible')
        // tooltip.show();
      })
      .on('mouseout', () => {
        circles.forEach(circle => circle.style('visibility', 'hidden'))
        verticalLine.style('visibility', 'hidden')
        // tooltip.hide();
      })
      .on('mousemove', (d, i, nodes) => {

//mounted
    this.addxAxis()
    this.addyAxis()

    //  call lasted
    select(svg)
      .selectAll('.domain')
      .attr('filter', this.filter)

    const theLine = line()
      .x((d, i) => this.xScale(this.data.labels[i]))
      .y(d => this.yScale(d))
      .curve(monotoneX)

    select(graphPart)
      .selectAll('.xkcd-chart-line')
      .data(this.data.datasets)
      .enter()
      .append('path')
      .attr('class', 'xkcd-chart-line')
      .attr('d', d => theLine(d.data))
      .attr('fill', 'none')
      .attr('stroke', (d, i) =>
        this.options.dataColors[i] ? this.options.dataColors[i] : colors[i]
      )
      .attr('filter', this.filter)

    const verticalLine = select(graphPart)
      .append('line')
      .attr('x1', 30)
      .attr('y1', 0)

...options,
    };
    this.title = title;
    this.data = {
      labels,
      datasets,
    };
    // TODO: find the longest dataset or throw an error for inconsistent datasets
    this.directionsCount = datasets[0].data.length;
    this.filter = 'url(#xkcdify-pie)';
    this.fontFamily = this.options.fontFamily || 'xkcd';
    if (this.options.unxkcdify) {
      this.filter = null;
      this.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
    }
    this.svgEl = select(svg)
      .style('stroke-width', '3')
      .style('font-family', this.fontFamily)
      .style('background', this.options.backgroundColor)
      .attr('width', svg.parentElement.clientWidth)
      .attr('height', Math.min((svg.parentElement.clientWidth * 2) / 3, window.innerHeight));
    this.svgEl.selectAll('*').remove();

    this.width = this.svgEl.attr('width');
    this.height = this.svgEl.attr('height');
    this.chart = this.svgEl.append('g')
      .attr('transform',
        `translate(${this.width / 2},${this.height / 2})`);

    addFont(this.svgEl);
    addFilter(this.svgEl);
    this.render();

handleX() {
      const { xScale, tickCount, height } = this

      select(this.$refs.xScale)
        .attr('transform', `translate(0, ${height})`)
        .call(
          axisBottom(xScale)
            .tickSize(0)
            .tickPadding(6)
            .ticks(tickCount)
        )
    }
  },

drawBar() {
    select(this.el)
      .transition()
      .duration(300)
      .attr("height", this.props.height)
      .attr("width", this.props.width)
      .attr("x", this.props.x);
  }
  render() {

if (yLabel) {
      this.yLabel = yLabel;
      margin.left = 70;
    }
    this.data = {
      labels,
      datasets,
    };
    this.filter = 'url(#xkcdify)';
    this.fontFamily = this.options.fontFamily || 'xkcd';
    if (this.options.unxkcdify) {
      this.filter = null;
      this.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
    }

    this.svgEl = select(svg)
      .style('stroke-width', '3')
      .style('font-family', this.fontFamily)
      .style('background', this.options.backgroundColor)
      .attr('width', svg.parentElement.clientWidth)
      .attr('height', Math.min((svg.parentElement.clientWidth * 2) / 3, window.innerHeight));

    this.svgEl.selectAll('*').remove();

    this.chart = this.svgEl.append('g')
      .attr('transform',
        `translate(${margin.left},${margin.top})`);
    this.width = this.svgEl.attr('width') - margin.left - margin.right;
    this.height = this.svgEl.attr('height') - margin.top - margin.bottom;

    addFont(this.svgEl);
    addFilter(this.svgEl);

.on('mouseout', (d, i, nodes) => {
        select(nodes[i]).attr('r', dotInitSize);

        tooltip.hide();
      });

getYlabelX() {
      this.$refs.ylable &&
        select(this.$refs.ylable).call(f => {
          f.attr('x', 0 - this.height / 2)
        })
    }
  },

updateAxis() {
    let { scale } = this.props;
    let xAxis = axisBottom().scale(scale);

    select(this.el)
      .transition()
      .duration(300)
      .call(xAxis)
      .selectAll("text")
      .attr("transform", "rotate(290) translate(-10, -10)")
      .style("text-anchor", "end");
  }
  render() {