Zooming d3js graph corresponding to nodes count

Question

I am trying to display my full tree within fixed height and width.

Since I dont know the exact nodes count , tree nodes went out of focus.

I have tried to adjust the zoom scale (manually) to display within the boundaries.

I just want to adjust the zoom scale automatically depends on the nodes count

Can anyone help me to sortout this issue.

var treeData = {
  "name": "Share point Server 2019",
  "id": "a093F0000078Id5QAE",
  "children": [{
      "name": "is extended by",
      "level": "sub node",
      "children": [{
        "name": "Share point Server 2019",
        "id": "a093F0000078Id5QAE"
      }]
    },
    {
      "name": "manages",
      "level": "sub node",
      "children": [{
          "name": "HPE ProLiant ML350 Tower",
          "id": "a093F0000078IcHQAU"
        },
        {
          "name": "HPE ProLiant ML350 Tower",
          "id": "a093F0000078IcHQAU"
        },
        {
          "name": "HPE ProLiant ML350 Tower",
          "id": "a093F0000078IcHQAU"
        },
        {
          "name": "HPE ProLiant ML350 Tower",
          "id": "a093F0000078IcHQAU"
        },
        {
          "name": "HPE ProLiant ML350 Tower",
          "id": "a093F0000078IcHQAU"
        },
        {
          "name": "HPE ProLiant ML350 Tower",
          "id": "a093F0000078IcHQAU"
        },
        {
          "name": "HPE ProLiant ML350 Tower",
          "id": "a093F0000078IcHQAU"
        },
        {
          "name": "HPE ProLiant ML350 Tower",
          "id": "a093F0000078IcHQAU"
        },
        {
          "name": "HPE ProLiant ML350 Tower",
          "id": "a093F0000078IcHQAU"
        },
        {
          "name": "HPE ProLiant ML350 Tower",
          "id": "a093F0000078IcHQAU"
        },
        {
          "name": "HPE ProLiant ML350 Tower",
          "id": "a093F0000078IcHQAU"
        }
      ]
    },
    {
      "name": "is operated by",
      "level": "sub node",
      "children": [{
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        },
        {
          "name": "Power point SH-20",
          "id": "a093F00000794ZWQAY"
        }
      ]
    }
  ]
};
var nodeCount = 53;
var scale = 1,
  svgHeight = 200,
  nodeCount = 13;;
var margin = {
    top: 20,
    right: 90,
    bottom: 30,
    left: 90
  },
  width = window.outerWidth,
  height = window.outerHeight;
var focused = false;
console.log('scale', scale)
var svg = d3.select("body").append("svg")
  .call(d3.zoom().on("zoom", function() {
    svg.attr("transform", d3.event.transform);
  })).on("dblclick.zoom", null)
  .attr("width", "1000")
  .attr("height", 800)
  .append("g")
svg.attr("transform", function(d) {

  return "translate(" +
    (450) + "," + (svgHeight) + ")scale(" + scale + ")";
});


var nodeCount = 15;
var i = 0,
  duration = 750,
  root;
// declares a tree layout and assigns the size
var treemap = d3.tree().size([height, width]);

// Assigns parent, children, height, depth
root = d3.hierarchy(treeData, function(d) {
  return d.children;
});
root.x0 = height;
root.y0 = 0;

// Collapse after the second level
if (typeof collapse === 'undefined')
  root.children.forEach(collapse);

update(root);

// Collapse the node and all it's children
function collapse(d) {
  if (d.children) {
    d._children = d.children
    d._children.forEach(collapse)
    d.children = null
  }
}

function update(source) {

  // Assigns the x and y position for the nodes
  var treeData = treemap(root);

  // Compute the new tree layout.
  var nodes = treeData.descendants(),
    links = treeData.descendants().slice(1);
  let left = root;
  let right = root;
  var dx = ((nodeCount * 18) / 1000);
  // Normalize for fixed-depth.
  nodes.forEach(function(d, index) {
    d.y = d.depth * 180;
    d.x = d.x * ((nodeCount * 18) / 1000);

  });
  // ****************** Nodes section ***************************

  // Update the nodes...
  var node = svg.selectAll('g.node')
    .data(nodes, function(d) {
      return d.id || (d.id = ++i);
    });

  // Enter any new modes at the parent's previous position.
  var nodeEnter = node.enter().append('g')
    .attr('class', 'node')
    .attr("transform", function(d) {
      return "translate(" + (source.y0) + "," + (source.x0) + ")";
    })
    .on('click', d => {
      // d3.event.preventDefault();

      component.set("v.nodeName", d.data.name);
    })
    .on("dblclick", click);


  // Add Circle for the nodes
  nodeEnter.append('circle')
    .attr('class', 'node')
    .attr('r', 1e-6)
    .style('stroke', 'steelblue')
    .style('stroke-width', '3px');

  // Add labels for the nodes
  nodeEnter.append('text')
    .attr("dy", ".35em")
    .attr("x", function(d) {
      return d.children || d._children ? -13 : 13;
    })
    .attr("text-anchor", function(d) {
      return d.children || d._children ? "end" : "start";
    })
    .text(function(d) {
      return d.data.name;
    });

  // UPDATE
  var nodeUpdate = nodeEnter.merge(node);

  // Transition to the proper position for the node
  nodeUpdate.transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + (d.y) + "," + (d.x) + ")";
    });

  // Update the node attributes and style
  nodeUpdate.select('circle.node')
    .attr('r', 3)
    .style("fill", function(d) {
      return d._children ? "lightsteelblue" : "#fff";
    })
    .attr('cursor', 'pointer');


  // Remove any exiting nodes
  var nodeExit = node.exit().transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + (source.y) + "," + source.x + ")";
    })
    .remove();

  // On exit reduce the node circles size to 0
  nodeExit.select('circle')
    .attr('r', 1e-6);

  // On exit reduce the opacity of text labels
  nodeExit.select('text')
    .style('fill-opacity', 1e-6);

  // ****************** links section ***************************

  // Update the links...
  var link = svg.selectAll('path.link')
    .data(links, function(d) {
      return d.id;
    });

  // Enter any new links at the parent's previous position.
  var linkEnter = link.enter().insert('path', "g")
    .attr("class", "link")
    .style('fill', "none")
    .style('stroke', "#ccc")
    .style('stroke-width', "2px")
    .attr('d', function(d) {
      var o = {
        x: source.x0,
        y: source.y0
      }
      return diagonal(o, o)
    });

  // UPDATE
  var linkUpdate = linkEnter.merge(link);

  // Transition back to the parent element position
  linkUpdate.transition()
    .duration(duration)
    .attr('d', function(d) {
      return diagonal(d, d.parent)
    });

  // Remove any exiting links
  var linkExit = link.exit().transition()
    .duration(duration)
    .attr('d', function(d) {
      var o = {
        x: source.x,
        y: source.y
      }
      return diagonal(o, o)
    })
    .remove();

  // Store the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });

  // Creates a curved (diagonal) path from parent to the child nodes
  function diagonal(s, d) {
    var path = "M" + d.y + "," + d.x +
      "C" + (d.y + s.y) / 2 + "," + d.x +
      " " + (d.y + s.y) / 2 + "," + s.x +
      " " + s.y + "," + s.x;

    return path;
  }

  // Toggle children on click.
  function click(d) {

  }
}

body {
  font: 10px sans-serif;
  margin: 50px;
}

.grid .tick {
  stroke: lightgrey;
  opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}

.axis path {
  fill: none;
  stroke: #bbb;
  shape-rendering: crispEdges;
}

.axis text {
  fill: #555;
}

.axis line {
  stroke: #e7e7e7;
  shape-rendering: crispEdges;
}

.axis .axis-label {
  font-size: 14px;
}

.line {
  fill: none;
  stroke-width: 1.5px;
}

.dot {
  /* consider the stroke-with the mouse detect radius? */
  stroke: transparent;
  stroke-width: 10px;
  cursor: pointer;
}

.dot:hover {
  stroke: rgba(68, 127, 255, 0.3);
}

<script src="https://d3js.org/d3.v4.min.js"></script>

<div style="background:white" id="body"></div>