title: Creating a d3 selection over an existing, detached SVG element
body: <p>I have a component in JavaScript that will provide an <code>&lt;svg&gt;</code> element to its host. I want to populate the SVG element using d3.js.</p>
  
  <p>If I let d3.js create the SVG element and add it to the <code>&lt;body&gt;</code>, then things work as expected:</p>
  
  <pre><code>var chart = d3.select('body').append('svg');
  </code></pre>
  
  <p>However I already have an SVG element. I want my code to more closely resemble:</p>
  
  <pre><code>var svg = document.createElement('svg'),
      chart = d3.select(svg);
  </code></pre>
  
  <p>This latter approach populates the SVG element (as seen in the elements panel of Chrome's developer tools) but it does not render properly.</p>
  
  <p>Am I going about this incorrectly?</p>
  
  <p>I don't mind if d3 creates the SVG element, so long as it doesn't attach it to the DOM and I can access it.</p>
  
  <hr>
  
  <p><strong>EDIT</strong> I've created a <a href="http://jsfiddle.net/drewnoakes/JVrPw/" rel="noreferrer">jsFiddle that reproduces my problem</a>. You can toggle the <code>APPROACH</code> variable between 1 and 2 to see alternate approaches. I see this issue in both Chrome and Firefox (latest versions on Ubuntu 13.04.)</p>
  
  <hr>
  
  <p><strong>EDIT 2</strong> I've created a screenshot showing the working and non-working versions side by side:</p>
  
  <p><a href="https://i.imgur.com/LR5e9At.png" rel="noreferrer"><img src="https://i.imgur.com/LR5e9At.png"></a></p>
  
  <p>You can see that the element trees are largely the same. However on the non-working version (left) the <em>Styles</em> panel (to the right of the element tree) is missing some user agent rules. I have no idea why this should be different. I'd suggest it was a bug in Chrome, but the same behaviour is visible in Firefox.</p>