How to use d3-zoom - 10 common examples

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

    }
  };

}
    }

    this.zoomTransform = !this.currentProps.zoomable
      ? zoomIdentity
      : event.transform;

    const zooming = this.prevZoomTransform.k !== this.zoomTransform.k;

    // if there is dragging along a 1d track, only allow panning
    // along the axis of the track
    if (!zooming) {
      if (trackOrientation === '1d-horizontal') {
        // horizontal tracks shouldn't allow movement in the y direction
        // don't move along y axis
        this.zoomTransform = zoomIdentity.translate(
          this.zoomTransform.x, this.prevZoomTransform.y
        ).scale(this.zoomTransform.k);
      } else if (trackOrientation === '1d-vertical') {
        // vertical tracks shouldn't allow movement in the x axis
        this.zoomTransform = zoomIdentity.translate(
          this.prevZoomTransform.x, this.zoomTransform.y
        ).scale(this.zoomTransform.k);
      }

      this.element.__zoom = this.zoomTransform;
    }

    this.applyZoomTransform(true);

    this.prevZoomTransform = this.zoomTransform;
    this.props.pubSub.publish('app.zoom', event);

if (animateTime) {
      let selection = this.elementSelection;

      this.activeTransitions += 1;

      if (!document.hidden) {
        // only transition if the window is hidden
        selection = selection
          .transition()
          .duration(animateTime);
      }

      selection.call(
        this.zoomBehavior.transform,
        zoomIdentity.translate(translateX, translateY).scale(k),
      )
        .on('end', () => {
          setZoom();
          this.activeTransitions -= 1;
        });
    } else {
      setZoom();
    }

    return last;
  }

if (animateTime) {
      let selection = this.elementSelection;

      this.activeTransitions += 1;

      if (!document.hidden) {
        // only transition if the window is hidden
        selection = selection
          .transition()
          .duration(animateTime);
      }

      selection.call(
        this.zoomBehavior.transform,
        zoomIdentity.translate(translateX, translateY).scale(k),
      )
        .on('end', () => {
          setZoom();
          this.activeTransitions -= 1;
        });
    } else {
      setZoom();
    }

    return last;
  }

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;

_onDensityChartDomainChanged = (brushSelection) => {
        const brushSelectionMin = brushSelection[0];
        const brushSelectionMax = brushSelection[1];

        // converts for a time-scale
        const brushedDomain = brushSelection.map(this.densityChartXScale.invert);

        d3Select(this.histogramChartRef.current).call(this.zoom.transform, d3ZoomIdentity
            .scale(this.state.densityChartDimensions.width / (brushSelectionMax - brushSelectionMin))
            .translate(-brushSelection[0], 0));

        this._updateBrushedDomainAndReRenderTheHistogramPlot(brushedDomain);
    };