Wybory w D3: jak używać parentNode.appendChild?

Question

Chciałbym poradzić sobie z nakładającymi się elementami SVG w D3.js za pomocą this method from StackOverflow.

Jednak ze względu na charakter mojego kodu, chcę użyć selektora D3 zamiast this, aby ponownie dodać element do DOM. Moje pytanie brzmi: w jaki sposób mogę użyć selektora D3, aby uzyskać odpowiedni węzeł?

ten sposób oryginalny przykład robi:

this.parentNode.appendChild(this); 

To moja próba, która nie powiedzie się z "Uncaught TypeError: nie można wywołać metodę 'appendChild' undefined":

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

ten JSFiddle (dostosowany od the original example) pokazuje problem: http://jsfiddle.net/cpcj5/

Czym różni się mój wybór D3 od this w oryginalnym przykładzie? Próbowałem używać thisNode.node().parentNode.appendChild(thisNode), ale to też się nie udało.

Answer 1

Numer .parentNode method dotyczy elementu DOM, a nie d3 selection.

Dostęp do elementu DOM z selekcji d3 jest nieco skomplikowany i często istnieją lepsze sposoby osiągnięcia tego, co chcesz zrobić. Niezależnie od tego, czy masz pojedynczy element wybrany, będzie to pierwsza i jedyna pozycja w pierwszej pozycji w d3.selection - czyli trzeba do niego dostęp tak:

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

edytowany Przykład oryginału za pomocą tego: http://jsfiddle.net/cpcj5/1/

Jeśli masz identyfikator a konkretnie chcesz uzyskać elementu DOM, bym po prostu iść z getElementById:

var someIdDOMElement = document.getElementById("someid") 

Patrząc na d3 documentation for binding events using on, widzimy, że w danej funkcji bind, th Zmienna e this jest elementem DOM zdarzenia, które zostało wywołane. Tak więc, kiedy mamy do czynienia z obsługą zdarzeń w d3, można po prostu użyć this, aby uzyskać element DOM z powiązanej funkcji.

Ale patrząc na kodzie, myślę, że łatwiej jest trzymać się pierwotnego wdrożenia dla ponownego dołączania węzeł przy użyciu oryginalnych metod JavaScript, a następnie tworząc wybór d3 korzystając d3.select na elemencie dom związany this. Oto jak robi to oryginalny kod: http://jsfiddle.net/cpcj5/3/

Jeśli masz jakiekolwiek trudności z tego powodu, proszę skomentuj, abym mógł je rozwiązać.

Answer 2

Można również użyć selection.node() w D3:

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