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

addInteraction() {

    selectAll(this.interactionG)
      .append('g')
      .attr('transform', `translate(${this.width / 2}, ${this.height / 2})`)
      .data((this.dataFormat === 'object') ?
        this.makePie(this.data[this.values]) :
        this.makePie(this.data)
      )
      .append('path')
      .attr('d', this.makeArc)
      .attr('stroke-width', '0px')
      .attr('fill', 'transparent');


    // create tooltip
    const Tooltip = select(this.el)
      .append('div')
      .style('opacity', 0)

private highlightBranch(node: Node, on: boolean) {
    if (!node.hasChildren) {
      return;
    }
    // start by highlighting spouse edges
    const selectedEdges = selectAll('.edges').filter((d: Node) => {
      return ((d.ma && d.ma === node || d.pa && d.pa === node) || (!isUndefined(node.spouse[0]) && !isUndefined(node.spouse[0].spouse.find((s: Node) => { return d.ma === s || d.pa === s; }))));
    });
    const selectedParentEdges = selectAll('.parentEdges').filter((d: Node) => {
      return ((d.ma && d.ma === node || d.pa && d.pa === node) || (!isUndefined(node.spouse[0]) && !isUndefined(node.spouse[0].spouse.find((s: Node) => { return d.ma === s || d.pa === s; }))));
    });


    if (on) {
      selectedEdges.classed('selected', true);
      selectedParentEdges.classed('selected', true);
    } else {
      selectedEdges.classed('selected', false);
      selectedParentEdges.classed('selected', false);
    }

data (arr) {

    if (!arguments.length) {
      return this.dataArray;
    }

    if (arr.constructor === String) {
      arr = d3.selectAll(arr);
    }

    if (arr instanceof d3.selection) {

      this.dataArray = [];
      this.attr("container", "container");
      this.attr("text", "text");

      var self = this;
      arr.each(function() {
        self.dataArray.push(new DataPoint({
          "container": this,
          "text": this.innerHTML
        }, self.settings));
      });

function closeTooltip() {
    selectAll(".interaction-tooltip")
      .style("opacity", 0)
      .style("display", "none");
  }
}

public renderTimeRangeText(timelineData: ITimelineData, rangeHeaderSettings: LabelsSettings): void {
        const leftMargin: number = (GranularityNames.length + Timeline.GranularityNamesLength)
            * this.timelineProperties.elementWidth;

        const maxWidth: number = this.svgWidth
            - leftMargin
            - this.timelineProperties.leftMargin
            - rangeHeaderSettings.textSize;

        d3SelectAll("g." + Timeline.TimelineSelectors.RangeTextArea.className).remove();

        if (rangeHeaderSettings.show && maxWidth > 0) {
            this.rangeTextSelection = this.headerSelection
                .append("g")
                .classed(Timeline.TimelineSelectors.RangeTextArea.className, true)
                .append("text");

            const timeRangeText: string = Utils.timeRangeText(timelineData);

            const labelFormattedTextOptions: dataLabelInterfaces.LabelFormattedTextOptions = {
                fontSize: rangeHeaderSettings.textSize,
                label: timeRangeText,
                maxWidth,
            };

            const actualText: string = dataLabelUtils.getLabelFormattedText(labelFormattedTextOptions);

export function renderThresholds(
  container: SVGContainer,
  threshold: Array,
  min: number,
  max: number,
  innerRadius: number,
  outerRadius: number
) {
  selectAll('line.threshold').remove();

  threshold.forEach((t: any) => {
    const angle = Math.PI * (t.value - min) / (max - min);
    const x0 = (innerRadius * Math.cos(angle));
    const y0 = (innerRadius * Math.sin(angle));
    const x1 = (outerRadius * Math.cos(angle));
    const y1 = (outerRadius * Math.sin(angle));

    container.select('g')
      .append('line')
      .attr('x1', -x0)
      .attr('y1', -y0)
      .attr('x2', -x1)
      .attr('y2', -y1)
      .attr('class', 'threshold-base')
      .style('stroke-width', 4)

listItems.on('mouseout', (d: any) => {
      selectAll('.edge').classed('pathway', false).classed('fadeEdge', false);
      select('#nodeGroup').selectAll('.title').classed('fadeNode', false);
      select('#nodeGroup').selectAll('.addIcon')
        .classed('fadeNode', false);
      selectAll('.edge.hiddenEdge')
        .attr('visibility', 'hidden');
    });

addInteraction() {

    selectAll(this.interactionG)
      .data((this.dataFormat === 'file') ?
        this.data :
        this.data.values
      )
      .append('rect')
      .attr('x', (d, i) => {
        return this.dataFormat === 'file' ?
          this.xScale(d[this.labels]) :
          this.xScale(this.data[this.labels][i]);
      })
      .attr('y', (d, i) => {
        return this.dataFormat === 'file' ?
          this.yScale(+d[this.values]) :
          this.yScale(this.data[this.values][i]);
      })
      .attr('width', this.xScale.bandwidth())

function mouseout() {
    selectAll("g").classed("active", false);
    selectAll("circle").classed("active-cell", false);
    selectAll(".active-row").remove();
  }