Selezioni in D3: come usare parentNode.appendChild?

Question

Mi piacerebbe occuparmi di elementi SVG sovrapposti in D3.js utilizzando this method from StackOverflow.

Tuttavia, a causa della natura del mio codice, voglio utilizzare un selettore D3 anziché this per aggiungere nuovamente l'elemento al DOM. La mia domanda è: come posso usare un selettore D3 per ottenere il nodo rilevante?

Questo è come l'esempio originale fa:

this.parentNode.appendChild(this); 

Questo è il mio tentativo, che non riesce con "TypeError Uncaught: Impossibile chiamare il metodo 'appendChild' di indefinito":

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

Questo JSFiddle (adattato da the original example) illustra il problema: http://jsfiddle.net/cpcj5/

In che modo la mia selezione D3 è diversa da this nell'esempio originale? Ho provato a utilizzare thisNode.node().parentNode.appendChild(thisNode) ma anche questo non è riuscito.

Answer 1

Il .parentNode method è per un elemento DOM, non un d3 selection.

Per accedere all'elemento DOM da una selezione d3 è un po 'complicato, e ci sono spesso modi migliori per ottenere ciò che si vuole fare. Indipendentemente da ciò, se si dispone di un singolo elemento selezionato, sarà il primo e unico oggetto entro il primo elemento di un d3.selection - cioè è necessario accedere in questo modo:

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

Un esempio modificata dell'originale utilizzare questo: http://jsfiddle.net/cpcj5/1/

Se avete l'id e in particolare vuole ottenere l'elemento DOM, avevo appena andare con getElementById:

var someIdDOMElement = document.getElementById("someid") 

Guardando d3 documentation for binding events using on, possiamo vedere che, all'interno della funzione si legare, th La variabile this è l'elemento DOM per l'evento che è stato attivato. Quindi, quando si ha a che fare con la gestione degli eventi in d3, si può semplicemente usare this per ottenere l'elemento DOM da una funzione associata.

Ma, guardando il codice, penso che sia più facile da attaccare con l'implementazione originale per la ri-aggiungendo il nodo utilizzando i metodi JavaScript originali, e quindi la creazione di una selezione D3 utilizzando d3.select sull'elemento dom legato a this. Ecco come funziona il codice originale: http://jsfiddle.net/cpcj5/3/

In caso di problemi causati da questo, si prega di commentare in modo che io possa affrontarli.

Answer 2

È inoltre possibile utilizzare selection.node() in D3:

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