title: D3/SVG. How do I position a child svg element beyond its parent's extent?
body: <p>Using <code>d3</code> I have an <code>svg</code> element that I want to parent a child <code>svg</code> element hierarchy. The twist is I want the children positioned beyond its parent extent:</p>
  
  <pre><code>var svg,
      group;
  
  svg = d3.select("body")
      .append("svg")
      .attr("width",  200)
      .attr("height", 100);
  
  group = svg
      .append("g")
      .attr("transform", "translate(" + 400 + "," + 300 + ")");
  
  group
      .append("rect")
      .attr("x", "0")
      .attr("y", "0")
      .attr("width", "300")
      .attr("width", "150");
  </code></pre>
  
  <p>If I run this code the rect will be invisible, clipped by its parent. How do I disable this parental clipping?</p>