d3.js - नए भाई तत्वों को कैसे सम्मिलित करें

Question

मुझे मौजूदा तत्वों के लिए नए भाई बहन डालने में समस्या है।

मैं इस संरचना

<svg> 
    <g> 
    <path class="data"></path> 
    <path class="data"></path> 
    </g> 
</svg> 

है और इस संरचना

<svg> 
    <g> 
    <path class="data"></path> 
    <text></text> 
    <path class="data"></path> 
    <text></text> 
    </g> 
</svg> 

चाहते हैं, लेकिन अगर मैं सम्मिलित d3.js का उपयोग समारोह

d3.select("g").insert("text", "path.data"); 

मैं निम्नलिखित मिल (का चयन के बावजूद कक्षा के नाम से)

<svg> 
    <g> 
    <text></text> 
    <path class="data"></path> 
    <path class="data"></path> 
    </g> 
</svg> 

कोई विचार?

Answer 1

सबसे पहले, यह ध्यान देने योग्य है कि सम्मिलित फ़ंक्शन में दूसरा तर्क चयनकर्ता से पहले है। इसके अलावा, बाएं हाथ के परिणाम पर जंजीर परिचालन कार्य करते हैं।

तो तुम

// select all the g elements (only 1) 
d3.select("g") 
    // For each g, insert a text element before "path.data" 
    .insert("text", "path.data"); 

ताकि आप ".data" तत्वों में से प्रत्येक के चयन और उनमें से प्रत्येक के लिए कोई कार्रवाई करने की जरूरत है आप प्रत्येक बच्चे ".data" के लिए एक कार्रवाई करने के लिए चाहते किया है । मुझे पूरी तरह से यकीन नहीं है कि डी 3 आपको एक विशिष्ट बच्चे के बाद तत्व डालने की अपेक्षा करता है। मुझे तत्व निर्माण और सम्मिलन करने के लिए डीओएम एपीआई का उपयोग करना बहुत आसान लगता है, लेकिन चयन पर पुनरावृत्ति करने के लिए d3.each फ़ंक्शन का उपयोग करना।

d3.selectAll("g > .data").each(function() { 
    var t = document.createElement('text'); 
    this.parentNode.insertBefore(t, this.nextSibling);  
});​