After a bunch of digging I found the answer. So there are three things that need to be done when performing an initial zoom on a page with zoom functionality:

1) Calculate the amount needed to translate/scale the svg, then set the transform attribute for the group under the svg.

  const groupZoom= this.GetSvgZoom(width, height);
  // svgGroup = svg > g
  svgGroup.attr("transform", `translate(${groupZoom.translate})scale(${groupZoom.scale})`); 

2) Now that the page has moved, you need to notify the zoom event to start at your translated position.

  const extent = this.GetZoomOrigin(width,height);
  d3.zoom().translateTo(svg, extent.translate[0], extent.translate[1]); 
  d3.zoom().scaleTo(svg, extent.scale);

3) Finally bind the zoom event to the svg element to give the zoom functionality
  .on("zoom", () =>
    svgGroup.attr("transform", d3.event.transform))

Related Query

More Query from same tag