score:7

Accepted answer

The .parentNode method is for a DOM element, not a d3 selection.

To access the DOM element from a d3 selection is a little tricky, and there are often better ways to achieve what you want to do. Regardless, if you have a single element selected, it will be the first and only item within the first item of a d3.selection - i.e. you need to access it like so:

var someIdDOMelement = d3.select("#someid")[0][0];

An edited example of your original using this: http://jsfiddle.net/cpcj5/1/

If you have the id and specifically want to get the DOM element, I'd just go with getElementById:

var someIdDOMElement = document.getElementById("someid")  

Looking at d3 documentation for binding events using on, we can see that, within the function you bind, the this variable is the DOM element for the event which was triggered. So, when dealing with event handling in d3, you can just use this to get the DOM element from within a bound function.

But, looking at your code, I think it's easier to stick with the original implementation for re-appending the node using the original javascript methods, and then creating a d3 selection using d3.select on the dom element bound to this. This is how the original code does it: http://jsfiddle.net/cpcj5/3/

If you have any difficulties caused by this, please comment so I can address them.

score:1

You can also use selection.node() in D3:

var thisNode = d3.select("#" + id);
thisNode.node().parentNode.appendChild(thisNode.node());

Related Query