How to access the parentNode of a selection to raise an element?
A D3 selection is just a double-array wrapped around the element(s) selected. As you found with p3
, you can dereference the arrays to find your first node, if you want. However, a better method does exist:
From the docs for selection.node()
:
Returns the first non-
null
element in the current selection. If the selection is empty, returnsnull
.
In your case:
var dad = current_gene_pcp.node().parentNode;
However, if you don't need the line other than the DOM handle, you might as well just get that directly:
// Search document-wide...
var dad = document.querySelector(".line[name=" + current_gene_name + "]");
// ...or only as a child of the current DOM element
var dad = this.querySelector(".line[name=" + current_gene_name + "]");
Here's a quick way to move the mouseover element to the front:
selection.on("mouseover", function() { this.parentNode.appendChild(this); });
See also a related thread in the d3-js group.