d3.js: डीओएम

Question

का बैक अप कैसे लें I मुझे यकीन नहीं है कि जावास्क्रिप्ट, डीओएम या डी 3.जेएस का कौन सा पहलू यह ज्ञान की कमी का खुलासा करता है: बस पता है कि मुझे खेद है निम्नलिखित के रूप में इस तरह के एक बुनियादी सवाल पूछना। मैं यहाँ नया हूँ।

मैं इस तरह एक json है:

[{"link":"a", "count": 3}, {"link":"b", "count": 4}, {"link":"c", "count": 2}] 

और मैं (स्पष्ट पता करने के लिए कुछ है कि

<ul> 
    <li> <a>a</a> (3)</li> 
    <li> <a>b</a> (4)</li> 
    <li> <a>c</a> (2)</li> 
</ul> 

d3.js का उपयोग कर की तरह लग रहा करना चाहते हैं: मैं क्या करना चाहते हैं डी 3 के साथ बहुत अधिक, यह सिर्फ मेरे पास एक समस्या है)।

d3.json से एक कॉलबैक में मेरी html में एक <ul> टैग पॉपिंग, कहीं बाद मैं कुछ इस तरह लिख सकते हैं:

d3.select("ul") 
    .selectAll("li") 
    .data(json) 
    .enter() 
    .append("li") 
    .append("a") 
    .text(function(d){return d.link}) 

(!? हालांकि यह अपरीक्षित है कैसे जावास्क्रिप्ट लोगों कोड के छोटे स्क्रैप का परीक्षण करते हैं) । यह (शायद) मेरे

<ul> 
    <li><a>a</a></li> 
    <li><a>b</a></li> 
    <li><a>c</a></li> 
</ul> 

दे देंगे लेकिन अब मैं <a> टैग से बाहर नहीं कर सकते हैं! मैं यह नहीं समझ सकता कि this का क्या असंगत संयोजन है और सूची आइटम टैग के बंद होने से पहले जानकारी के उस अतिरिक्त भाग पर ध्यान देने के लिए मुझे क्या करना है या माता-पिता को चुनना नहीं है। मुझे क्या करना चाहिये?

Answer 1

सरल: विधि श्रृंखला के साथ ओवरबोर्ड पर न जाएं। :)

var ul = d3.select("ul"); 

var li = ul.selectAll("li") 
    .data(json) 
    .enter().append("li"); 

var a = li.append("a") 
    .text(function(d) { return d.link; }); 

अब आप ली में अन्य सामान जोड़ सकते हैं। इस मामले में, के बाद से डी 3 केवल मदद से आप तत्वों (बल्कि कच्चे पाठ नोड्स से) जोड़ने, तो आप शायद निक्षिप्त पाठ के लिए एक अवधि में जोड़ना चाहेंगे:

li.append("span") 
    .text(function(d) { return " (" + d.count + ")"; });