title: trying to dynamically append svg group with d3
body: <p>I'm trying to dynamically append a group to an svg.  I'm currently selecting an existing group from the svg as shown below:</p>
  
  <pre><code>var regions = d3.select(document.getElementById('imgMap').contentDocument).select('#cellregionnode').selectAll('circle')[0];
  </code></pre>
  
  <p>Now I'm trying to dynamically add a group to the same svg but I'm encountering issues for some reason.  </p>
  
  <pre><code>var myNewGroup = d3.select(document.getElementById('imgMap').contentDocument).append('g').attr('id','myNewGroup');
  </code></pre>
  
  <p>However, attempting this code returns the following error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'apply' of null
      at window.onerror (systemjs.js:8)
  
  Uncaught TypeError: Cannot read property 'createElementNS' of null
      at XMLDocument.t (d3.v3.min.js:1)
      at XMLDocument.&lt;anonymous&gt; (d3.v3.min.js:3)
      at Array.Co.select (d3.v3.min.js:3)
      at Array.Co.append (d3.v3.min.js:3)
      at setGlobals (DataLoader.js:40)
      at Object.success (DataLoader.js:17)
      at i (app.min.js:2)
      at Object.fireWith [as resolveWith] (app.min.js:2)
      at A (app.min.js:4)
      at XMLHttpRequest.&lt;anonymous&gt; (app.min.js:4)
  </code></pre>
  
  <p>Any idea what might be causing this error or how to fix?</p>