How to set initial position and scale when using d3.zoom()

Question

I have the following code working;

const svg = d3
  .select("svg")
  .call(
    d3
      .zoom()
      .wheelDelta(this.delta)
      .on("zoom", function() {
        svg.attr("transform", d3.event.transform);
      })
  )
  .append("g")
  .attr("id", "tree-container");

I later add a d3 tree layout insode the g.tree-container. The initial tree node is drawn in top left. Ideally I would like the initial node somewhere near the center of the svg

I have look here; D3.js Set initial zoom level

but can't get it to work with my code and I don't really understand what is going on.

(i believe i am using d3 version 5.7)