How to use d3-selection - 10 common examples

mouseQuadtreeSearch = function () {
              const event = mouse(this);
              const [xp, yp] = [event[0], event[1]];

              // Only highlight within 35 pixels
              let maximum_distance = x.invert(35) - x.invert(0);
              let closest = null;

              function draw_quad(quad_name) {
              // Search all the visible quadtrees for the point.
              // It may be just offscreen, alas.
              // Nonexistent tiles return nothing.
                if (!stored_tiles[quad_name]) { return false; }

                const zooml = quad_name.split(',')[0];


                const quadData = stored_tiles[quad_name].quadtree;

brushed() {
    /**
         * Should only be called  on active brushing, not in response to the
         * draw event
         */
    const s = event.selection;

    if (!this._xScale || !this._yScale) { return; }

    const xDomain = this.viewportXDomain;

    const yDomain = [this._yScale.invert(s[0][1]),
      this._yScale.invert(s[1][1])];

    // console.log('xDomain:', xDomain);
    // console.log('yDomain:', yDomain);

    this.setDomainsCallback(xDomain, yDomain);
  }

brushed() {
    /**
         * Should only be called  on active brushing, not in response to the
         * draw event
         */
    const s = event.selection;

    if (!this._xScale || !this._yScale) { return; }

    const xDomain = [this._xScale.invert(s[0][0]),
      this._xScale.invert(s[1][0])];

    const yDomain = this.viewportYDomain;

    // console.log('xDomain:', xDomain);
    // console.log('yDomain:', yDomain);

    this.setDomainsCallback(xDomain, yDomain);
  }

    move(x = event.pageX, y = event.pageY) {
        if (this.verbose) {
            console.log(x);
            console.log(y);
        }
        x = x + this.offsetX; // TODO: get rid of the hard-coded adjustment
        y = (y + this.offsetY)<0?10:y+this.offsetY;
        const t = select('#'+this.id)
            .style("left", `${x}px`)
            .style("top", `${y}px`)
    }

}

    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);

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);
    }

this.map.sel.on('click.start_reaction', () => {
        // TODO fix this hack
        if (this.direction_arrow.dragging) return
        // reload the reaction input
        var coords = {
          x: d3Mouse(node)[0],
          y: d3Mouse(node)[1]
        }
        // unselect metabolites
        this.map.deselect_nodes()
        this.map.deselect_text_labels()
        // reload the reaction input
        const hasModel = this.reload(null, coords, true)
        if (hasModel) {
          // show the dropdown
          this.showDropdown(coords)
        }
        // generate the target symbol
        this.showTarget(this.map, coords)
      })
      this.map.sel.style('cursor', 'pointer')

function highlightAndTooltip(
  hasData,
  data,
  state,
  scales,
  g,
  tooltip,
  showTooltip = true,
  showHighlight = true,
  fireClick = false
) {
  if (!hasData) {
    return;
  }
  const localCoords = d3Mouse(g.nodes()[0]);
  const hoverX = scales.x.invert(localCoords[0]);
  const selectedData = findSelectedData(data, hoverX);
  hilightData(selectedData, scales, g);
  const chartBoundingRect = g["_parents"][0].getBoundingClientRect(); // Strangely, g's own width can sometimes be far too wide.
  Tooltip.show(
    Tooltip.html(selectedData),
    tooltip,
    state.tooltipSettings,
    chartBoundingRect
  );

  if (fireClick) {
    selectedData.forEach(chartData => {
      if (chartData.onClick) {
        chartData.onClick(hoverX); // TODO also pass Y
      }