title: How to access the parentNode of a selection to raise an element?
body: <p>I've created the following document:</p>
  <pre><code>&lt;g&gt;
      &lt;path class=​&quot;line&quot; name=​&quot;gene_1&quot; stroke=​&quot;#aec7e8&quot; d=​&quot;M10.47...&quot;&gt;​&lt;/path&gt;​
      &lt;path class=​&quot;line&quot; name=​&quot;gene_2&quot; stroke=​&quot;#aec7e8&quot; d=​&quot;M10.47...&quot;&gt;​&lt;/path&gt;​
      &lt;path class=​&quot;line&quot; name=​&quot;gene_3&quot; stroke=​&quot;#aec7e8&quot; d=​&quot;M10.47...&quot;&gt;​&lt;/path&gt;​
      ...
  &lt;/g&gt;
  </code></pre>
  <p>When I mouse over each path I want to append it last inside the <code>svg:g</code> so it appears on top of the other lines, but I don't know how to properly select the <code>parentNode</code>:</p>
  <pre><code>function onmouseover(d, i){
    var current_gene_name = d3.select(this).attr(&quot;name&quot;),
        current_gene_pcp = d3.select(&quot;.line[name=&quot; + current_gene_name + &quot;]&quot;);
  
    p1 = this.parentNode 
  
    p2 = current_gene_pcp[0].parentNode
  
    p3 = current_gene_pcp[0][0].parentNode
  
    //p.appendChild(this);
  }
  </code></pre>
  <p><code>p1</code> works, but I wanted to make sure that <code>this</code> is a <code>.line</code>, so I preferred to use <code>current_gene_pcp</code>, but <code>p2</code> returns <code>&lt;html&gt;&lt;/html&gt;</code> as the parent, even though <code>p3</code> returns the proper <code>&lt;g&gt;&lt;/g&gt;</code>. This last version seems like a bug waiting to happen. Is there a better way?</p>