title: why g element rendering outside of svg
body: <p>I use D3.js append g element after svg. But it, somehow, renders outside of parent svg element.</p>
  
  <p>It looks like g element's container is body, but not svg element.</p>
  
  <p>JS code:</p>
  
  <pre><code>var map = $("#map");
  var mapw = map.width();
  var maph = mapw;
  var svg_map = d3.select("#map").append('svg').attr('width',mapw).attr('height',maph);
  var g_map = svg_map.append('g').attr('transform','translate('+maph/2+','+mapw/2+')');
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/1xXw6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1xXw6.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/I8LIR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I8LIR.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/2WM2X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2WM2X.png" alt="enter image description here"></a></p>