title: How do you center a <g> within a <svg> in D3.js?
body: <p>I am trying to center a group that has a d3 tree inside of it. The svg is currently positioned perfectly across the browser and I am just trying to get the dynamically loaded tree to stay in the center of that svg element. All tree elements are within one group and have a zoom listener and have the ability to pan.</p>
  
  <pre><code>&lt;svg width="1535" height="685" overflow-y="hidden" class="overlay"&gt;
      &lt;g transform="translate(742.5,342.5)scale(1)"&gt;
          &lt;g class="node" transform="translate(0,25)"&gt;
            &lt;circle class="nodeCircle" r="4.5" style="fill: rgb(255, 255, 255)&lt;/circle&gt;
            &lt;text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"&gt;&lt;/text&gt;
            &lt;text x="10" dy="1.5em" class="nodeText" text-anchor="start"&gt;&lt;/text&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>