How to use the d3-zoom.zoom function in d3-zoom

.offset([-10, 0])
        .html(function(d) {
            var nameText = "<span style="text-decoration: underline">" + escapeHtml(d.data.name) + "</span><br>";
            var debugPropsText = DEBUG ? buildPropertyList(getDebugProperties(d), "qg-prop-name2") : "";
            var directPropsText = buildPropertyList(getDirectProperties(d.data), "qg-prop-name2");
            var propertiesText = d.data.hasOwnProperty("properties") ? buildPropertyList(d.data.properties) : "";
            return nameText + debugPropsText + directPropsText + propertiesText;
        });

    // Define the zoom function for the zoomable tree
    function zoom() {
        svgGroup.attr("transform", d3selection.event.transform);
    }

    // Define the zoomBehavior which calls the zoom function on the "zoom" event constrained within the scaleExtents
    var zoomBehavior = d3zoom.zoom()
        .extent(function() {
            return [[0, 0], [viewerWidth, viewerHeight]];
        })
        .scaleExtent([0.1, 5]).on("zoom", zoom);

    // Define the baseSvg, attaching a class for styling and the zoomBehavior
    var baseSvg = d3selection.select(target).append("svg")
        .attr("viewBox", "0 0 " + viewerWidth + " " + viewerHeight)
        .attr("height", viewerHeight)
        .attr("class", "qg-overlay")
        .call(zoomBehavior);

    defineSymbols(baseSvg, ooo);

    function collapseDefault(r) {
        common.visit(r, function(n) {

_observeEnableZoom(enable) {
      if (enable) {
        const zoomed = () => {
          this.zoomedEl.attr('transform', d3Event.transform);
        };

        this._zoom = zoom().on('zoom', zoomed);
        this.selectShadow('#svg').call(this._zoom);
        // d3.select(this.$.svg).call(this._zoom);

      }
      if (!enable) {
        this._zoom = null;
      }

    }
  };

const translateStart = s.indexOf('translate(');
            if (translateStart !== -1) {
                const spec = s.substring(
                    translateStart + 10,
                    s.indexOf(')', translateStart)
                );
                const tokens = spec.split(',');
                translate = [parseFloat(tokens[0]), parseFloat(tokens[1])];
            }

            gContent.attr('transform', this.savedTransform);
        } else {
            gContent.attr('transform', `scale(${scale})`);
        }

        const zoom = d3zoom().on('zoom', zoomed);

        this.svg.call(zoom);
        this.svg.call(zoom.scaleBy, scale);

        gContent.attr(
            'transform',
            `translate(${translate[0]}, ${translate[1]})`
        );
        gContent.attr('transform', `scale(${scale})`);
    }

initZoom(event, scaleExtent) {
    const isZoom = event.isZoom || noop;
    const zoom = d3Zoom.zoom()
      .on('start', (d) => {
        event.start && event.start(d);
      })
      .on('zoom', () => {
        if (isZoom(d3_event) !== false) {
          const transform = d3_event.transform;
          const translate = [transform.x, transform.y], scale = transform.k;
          this.setTransform(translate, scale);
          event.zoom && event.zoom({translate, scale});
        }
      })
      .on('end', (d) => {
        event.end && event.end(d);
      })
      if (scaleExtent) {
        zoom.scaleExtent(scaleExtent)

export function setupZoom(svgGroups) {

    const myZoom = zoom()
        .scaleExtent([0.1, 2])
        .on("zoom", () => {
            const tx = event.transform.x;
            const ty = event.transform.y;
            const k = event.transform.k;

            svgGroups
                .rowAxisContent
                .attr("transform", `translate(0 ${ty}) scale(${k})`);

            svgGroups
                .columnAxisContent
                .attr("transform", `translate(${tx} 0) scale(${k})`);

            svgGroups
                .gridContent

this.graphData = graphData
    this.allTargetObj = this.svgGrp
      .selectAll('g.layer-objects')
      .selectAll('.dep')

    this.allTargetObj
      .on('click', d => this.clickEventHandler(d))
      .on('mouseover', d => this.mouseOverHandler(d))
      .on('mouseout', d => this.mouseOutHandler(d))

    this.setGraphControlButtons(() => {
      this.clearHighlight()
      this.clearDependencyLines('')
    })

    this.zoom = zoom()
      .scaleExtent([1 / 4, 5])
      .on('zoom', () => this.svgGrp.attr('transform', event.transform))
    this.svg.call(this.zoom)
    this.setInitialZoom()
  }

constructor(updateCallback: TUpdateCallback) {
    this.updateCallback = updateCallback;
    this.zoom = d3Zoom()
      .scaleExtent(DEFAULT_SCALE_EXTENT)
      .constrain(this.constrainZoom)
      .on('zoom', this.onZoomed);
  }

boundNode = (node: SVGSVGElement) => {
    this.node = node;
    this.zoom = zoom()
      .scaleExtent([1, 10])
      .on('zoom', this.zoomed);
    this.selection = select(this.node).call(this.zoom);
  };

componentDidMount() {
    this.container = select(this.mapContainer);
    this.zoomBehaviour = zoom()
      .scaleExtent([MIN_ZOOM, MAX_ZOOM])
      .on('zoom', this.zoomHandler);
    this.container.call(this.zoomBehaviour);
  }

constructor(parentDom, config) {

    super(parentDom, config);
    this.parentDom = parentDom;
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    this.parentDom.appendChild(svg);

    this.svg = this.root =
      select(svg)
      .attr('width', config.width)
      .attr('height', config.height);

    const g = this.svg.append('g');
    this.renderContext = this.svg

    this.zoom = zoom()
      .on('zoom', () => {
        this.svg.attr('transform', event.transform);
      });

    this.svg.append('rect')
      .attr('width', config.width)
      .attr('height', config.height)
      .style('fill', 'transparent')
      .style('pointer-events', 'all')
      .call(this.zoom);

    this.svg = g;
    this.config = {
      ...defaultLayerProfile,
      ...config
    }