title: Selections in D3: how to use parentNode.appendChild?
body: <p>I'd like to deal with overlapping SVG elements in D3.js using <a href="https://stackoverflow.com/questions/14120232/svg-elements-overlapping-issue">this method from StackOverflow</a>. </p>
  
  <p>However, due to the nature of my code, I want to use a D3 selector rather than <code>this</code> to re-add the element to the DOM. My question is: how can I use a D3 selector to get the relevant node?</p>
  
  <p>This is how the original example does it: </p>
  
  <pre><code>this.parentNode.appendChild(this);
  </code></pre>
  
  <p>This is my attempt, which fails with "Uncaught TypeError: Cannot call method 'appendChild' of undefined": </p>
  
  <pre><code>var thisNode = d3.select("#" + id);
  thisNode.parentNode.appendChild(thisNode);
  </code></pre>
  
  <p>This JSFiddle (adapted from <a href="http://bl.ocks.org/biovisualize/1197731" rel="nofollow noreferrer">the original example</a>) demonstrates the problem: <a href="http://jsfiddle.net/cpcj5/" rel="nofollow noreferrer">http://jsfiddle.net/cpcj5/</a></p>
  
  <p>How is my D3 selection different from the <code>this</code> in the original example? I tried using <code>thisNode.node().parentNode.appendChild(thisNode)</code> but that also failed. </p>