How to use the d3-selection.select function in d3-selection

}

    xRange.push(width);
    xDomain.push(allDomain[1]);
    xTicks.push(allDomain[1]);

    this.x.domain(xDomain);
    this.x.range(xRange);

    this.x2.domain(xDomain);
    this.x2.range(xRange);

    this.visibleXAxis.tickValues(xTicks);
    this.extremesXAxis.tickValues(xTicks);

    select('#visible_axis')
      .call(this.visibleXAxis);

    select('#extremes_axis')
      .attr('opacity', .6);

    select('#extremes_axis')
      .call(this.extremesXAxis);

    select('#extremes_axis')
      .attr('opacity', .6);

    select('#visible_axis')
      .selectAll('text')
      //Offsets for axisBottom
      // .attr('dx', '-.1em')
      // .attr('dy', '.65em')

const length = data.length;

    const height = 60 - margin.top - margin.bottom;

    width -= 30;

    const x = scaleLinear()
        .range([0, width])
        .domain([0, length]);

    const y = scaleLinear()
        .range([height, 0])
        .domain([0, yMax]);

    // Construct the SVG canvas.
    svg = select(element)
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);

    if (data) {
        const areaDrawer = area()
            .x((d, i) => x(i))
            .y0(d => y(d))
            .y1(height);

        svg.append("path")
            .datum(data)
            .attr("class", "depth-area")
            .attr("d", areaDrawer);

draw(explanation) {

    let scale = scaleLinear().domain([0,max(explanation.features.map(x=>Math.abs(x.effect)))]).range([0,100]);
    window.scale = scale;
    console.log("sdf", [0,extent(explanation.features.map(x=>x.effect))[1]])
    let fmt = format('.2');
    let incomingItems = select(this.container).selectAll('.element').data(reverse(sortBy(explanation.features, 'effect')))
      .enter().append('div');
    incomingItems.append('div').classed('simple-list-label', true).text(x => `${x.name} (${fmt(x.effect)})`)
    incomingItems.append('div')
      .classed('simple-list-padding', true)
      .style('width', x=> (x.effect > 0 ? 100 : 100 + scale(x.effect))+"px");
    incomingItems.append('div')
      .classed('simple-list-value', true)
      .style('width', x=>{ let v = Math.abs(scale(x.effect)); console.log(v); return v+"px";})
      .style('background', x=> x.effect > 0 ? '#00a' : '#a00');
  }
}

.on('dblclick', (elem, index, textElements) => {
        this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
        this.editedElement = elem;

        select(textElements[index]).attr('visibility', 'hidden');

        select(textElements[index]).classed('editingMode', true);

        this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute('drawing_id');
        var transformData = textElements[index].parentElement.getAttribute('transform').split(/\(|\)/);
        var x = Number(transformData[1].split(/,/)[0]) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
        var y = Number(transformData[1].split(/,/)[1]) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
        this.leftPosition = x.toString() + 'px';
        this.topPosition = y.toString() + 'px';
        this.temporaryTextElement.nativeElement.innerText = elem.text;

        this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'color', elem.fill);
        this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-family', elem.font_family);
        this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-size', `${elem.font_size}pt`);
        this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-weight', elem.font_weight);

ref: function ref(node) {
      return select(node).call(drawGrid(horizontal, xScale, height, yScale, width, xAxisTicks, yAxisTicks));
    }
  }), title && React.createElement(Title, {

_zoomConfig = () =>
        d3Select(`#${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`).call(
            d3Zoom()
                .scaleExtent([this.state.config.minZoom, this.state.config.maxZoom])
                .on('zoom', this._zoomed)
        );

export function uiFieldCheck(field, context) {
    var dispatch = d3_dispatch('change');
    var options = field.strings && field.strings.options;
    var values = [];
    var texts = [];

    var input = d3_select(null);
    var text = d3_select(null);
    var label = d3_select(null);
    var reverser = d3_select(null);

    var _impliedYes;
    var _entityID;
    var _value;


    if (options) {
        for (var k in options) {
            values.push(k === 'undefined' ? undefined : k);
            texts.push(field.t('options.' + k, { 'default': options[k] }));
        }
    } else {
        values = [undefined, 'yes'];

.on('mouseout', function() {
        select(this).style('opacity', 0);
      })
      .call(_drag);

nextProps.disableScroll &&
      this.props.currentState !== nextProps.currentState
    ) {
      d3.selectAll(`#idyll-scroll-${this.id} .idyll-step`)
        .filter((d, i) => {
          return nextProps.currentState === this.SCROLL_NAME_MAP[i];
        })
        .node()
        .scrollIntoView({ behavior: 'smooth' });
    }
    if (
      nextProps.disableScroll &&
      (!nextProps.currentStep ||
        nextProps.currentStep < Object.keys(this.SCROLL_STEP_MAP).length - 1)
    ) {
      d3.select('body').style('overflow', 'hidden');
    }
  }

_updateBrush() {
        if (this.props.data.length === 0) {
            return;
        }

        d3Select(this.densityBrushRef.current)
            .call(this.brush);
    }