डी 3 में चयन: parentNode.appendChild का उपयोग कैसे करें?

Question

मैं this method from StackOverflow का उपयोग कर D3.js में ओवरलैपिंग एसवीजी तत्वों से निपटना चाहता हूं।

हालांकि, मेरे कोड की प्रकृति के कारण, मैं डीओएम में तत्व को दोबारा जोड़ने के लिए this के बजाय डी 3 चयनकर्ता का उपयोग करना चाहता हूं। मेरा सवाल है: प्रासंगिक नोड प्राप्त करने के लिए मैं डी 3 चयनकर्ता का उपयोग कैसे कर सकता हूं?

इस तरह मूल उदाहरण यह है है:

this.parentNode.appendChild(this); 

यह मेरा प्रयास है, जो के साथ विफल है "Uncaught TypeError: विधि कॉल नहीं कर सकता 'appendChild' अपरिभाषित की":

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

यह JSFiddle (the original example से अनुकूलित) समस्या का प्रदर्शन करता है: http://jsfiddle.net/cpcj5/

मेरा डी 3 चयनसे अलग कैसे है मूल उदाहरण में? मैंने thisNode.node().parentNode.appendChild(thisNode) का उपयोग करने की कोशिश की लेकिन यह भी असफल रहा।

Answer 1

.parentNode method एक डीओएम तत्व के लिए है, d3 selection नहीं।

डी 3 चयन से डीओएम तत्व तक पहुंचने के लिए थोड़ा मुश्किल है, और आप जो करना चाहते हैं उसे प्राप्त करने के लिए अक्सर बेहतर तरीके होते हैं। भले ही, यदि आप एक ही तत्व का चयन किया है, यह पहली और एकमात्र आइटम एक d3.selection के पहले आइटम के भीतर हो जाएगा - यानी आप ऐसा है जैसे कि यह उपयोग करने के लिए की जरूरत है:

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

अपने मूल के एक संपादित उदाहरण इस का उपयोग करते हुए: http://jsfiddle.net/cpcj5/1/

आप आईडी होना और विशेष रूप से DOM तत्व प्राप्त करना चाहते हैं, मैं सिर्फ getElementById के साथ जाना चाहते हैं:

var someIdDOMElement = document.getElementById("someid") 

d3 documentation for binding events using on को देखते हुए, हम देख सकते हैं, समारोह के भीतर आप बांधो, वें ई this वैरिएबल उस घटना के लिए DOM तत्व है जो ट्रिगर किया गया था। इसलिए, डी 3 में इवेंट हैंडलिंग से निपटने पर, आप एक बाध्य कार्य के भीतर से DOM तत्व प्राप्त करने के लिए केवल this का उपयोग कर सकते हैं।

लेकिन, अपने कोड को देखते हुए, मुझे लगता है कि यह नोड फिर से जोड़कर मूल जावास्क्रिप्ट तरीकों का उपयोग कर, और उसके बाद डोम तत्व this करने के लिए बाध्य पर d3.select का उपयोग कर एक d3 चयन बनाने के लिए मूल कार्यान्वयन के साथ रहना आसान है। इस प्रकार मूल कोड यह करता है: http://jsfiddle.net/cpcj5/3/

यदि आपको इसके कारण कोई कठिनाई है, तो कृपया टिप्पणी करें ताकि मैं उन्हें संबोधित कर सकूं।

Answer 2

तुम भी डी 3 में selection.node() का उपयोग कर सकते हैं:

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