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

const tooltipContent = obj ? accessorFn(state[`${obj.type.toLowerCase()}Label`])(obj.d) || '' : '';
          toolTipElem.style.visibility = tooltipContent ? 'visible' : 'hidden';
          toolTipElem.innerHTML = tooltipContent;

          state.hoverObj = obj;
        }

        refreshShadowCanvas();
      }

      // Wipe canvas
      clearCanvas(ctx, state.width, state.height);

      // Frame cycle
      const t = d3ZoomTransform(state.canvas);
      state.forceGraph.globalScale(t.k).tickFrame();

      TWEEN.update(); // update canvas animation tweens

      state.animationFrameRequestId = requestAnimationFrame(animate);
    })();
  },

// Element size
      canvas.style.width = `${state.width}px`;
      canvas.style.height = `${state.height}px`;

      // Memory size (scaled to avoid blurriness)
      canvas.width = state.width * pxScale;
      canvas.height = state.height * pxScale;

      // Normalize coordinate system to use css pixels (on init only)
      if (!curWidth && !curHeight) {
        canvas.getContext('2d').scale(pxScale, pxScale);
      }
    });

    // Relative center panning based on 0,0
    const k = d3ZoomTransform(state.canvas).k;
    state.zoom.translateBy(state.zoom.__baseElem,
      (state.width - curWidth) / 2 / k,
      (state.height - curHeight) / 2 / k
    );
  }
}

unzoom() {
		const $$ = this.internal;
		const config = $$.config;

		if ($$.zoomScale) {
			config.subchart_show ?
				$$.brush.getSelection().call($$.brush.move, null) :
				$$.zoom.updateTransformScale(d3ZoomIdentity);

			$$.updateZoom(true);
			$$.zoom.resetBtn && $$.zoom.resetBtn.style("display", "none");

			// reset transform
			const eventRects = $$.main.select(`.${CLASS.eventRects}`);

			if (d3ZoomTransform(eventRects.node()) !== d3ZoomIdentity) {
				$$.zoom.transform(eventRects, d3ZoomIdentity);
			}

			$$.redraw({
				withTransition: true,
				withY: config.zoom_rescale
			});
		}
	}
});

const setupZoom = ({
  zoomRoot,
  transformRoot,
  nodes,
  showNodes,
  width,
  height,
  packedData
}) => {

  const state = {
    zoomTo: null,
    zoomToTransform: null,
    // Find the current zoom transform if any
    transform: zoomTransform(zoomRoot.node())
  };

  const zoomBehavior = zoom();

  zoomBehavior.on("zoom", () => {
    const event = d3Event;
    state.transform = event.transform;
    zoomToTransform(event.transform)
  });

  zoomRoot.call(zoomBehavior);

  // Amount of space to leave around a node when zoomed into that node
  // (as a fraction of the node diameter)
  const viewPadding = 0.25;

_onZoomed = () => {
    const root = this.rootRef.current;
    if (!root) {
      return;
    }
    const zoomTransform = getTransform(root);
    this.setState({ zoomTransform });
  };

if (svg.size() == 0) {
        return this;
    }
    this._zoomSelection = svg;
    var zoomBehavior = zoom()
        .scaleExtent(this._options.zoomScaleExtent)
        .translateExtent(this._options.zoomTranslateExtent)
        .interpolate(interpolate)
        .on("zoom", zoomed);
    this._zoomBehavior = zoomBehavior;
    var g = d3.select(svg.node().querySelector("g"));
    svg.call(zoomBehavior);
    if (!this._active) {
        translateZoomBehaviorTransform.call(this, g);
    }
    this._originalTransform = zoomTransform(svg.node());

    return this;
};

private getCameraPosition(): ZoomTransform {
        return zoomTransform(this._nodesContainer.node());
    }

return function(t) {
                                                node.setAttribute("transform", interpolateTransformSvg(zoomTransform(graphvizInstance._zoomSelection.node()).toString(), getTranslatedZoomTransform.call(graphvizInstance, element).toString())(t));
                                            };
                                        });

configureZoom (svg, g) {
            svg = svg || d3.select('.map.canvas');
            g = g || svg.select('g.map.group');

            const c = this.constants;
            const t = zoom.zoomTransform(g).translate(c.xi, c.yi).scale(c.scale);

            const zoomBehavior = zoom.zoom()
                .scaleExtent([c.scale-0.2, 8])
                .translateExtent([[c.x0, c.y0],[c.x1, c.y1]])
                .on('zoom', () => {
                    g.attr('transform', d3.event.transform);
                });
            svg.call(zoomBehavior).on('wheel', function () { d3.event.preventDefault(); });
            svg.call(zoomBehavior.transform, t);
        },
    }