डी 3

Question

के साथ डीआईवी की गतिशील सूची बनाना मैं फैंसी एनिमेटेड चार्ट बनाने के लिए D3 का उपयोग कर रहा हूं, और उदाहरण बहुत अच्छे हैं। हालांकि, मैं कुछ और अधिक बुनियादी रूप से कुछ करने की कोशिश कर रहा हूं, और परेशानी हो रही है - डीआईवी की एक साधारण सूची में बाध्यकारी डेटा।

मैं अस्पष्टता 0, transition() पर तत्वों को प्रारंभ करने के लिए उन्हें में फीका करने के लिए, और exit() उन्हें बाहर नहीं हो पाती और उन्हें हटाने के लिए enter() की स्थापना की। enter() और exit() ठीक काम कर रहे प्रतीत होते हैं - हालांकि, जब किसी अद्यतन में सूची में पहले से मौजूद एक मौजूदा तत्व होता है, तो यह आंशिक रूप से हटाया जाता है - युक्त डीआईवी बनी हुई है, लेकिन सामग्री गायब हो जाती है। मैं समझ नहीं पा रहा हूं कि तत्व की सामग्री इस तरह क्यों बदली जाएगी।

var data = [...]; 
sorted = data.sort(function(a, b) { return d3.descending(a.id, b.id); }); 

var tweet = tweetsBox 
    .selectAll('div') 
    .data(sorted, function(d) { return d.id; }); 

var enterDiv = tweet.enter() 
    .append("div") 
    .attr("class", "tweetdiv") 
    .style("opacity", 0); 
enterDiv.append("div") 
    .attr("class", "username") 
    .text(function(d) { return "@" + d.username }); 
enterDiv.append("div") 
    .attr("class", "displayname") 
    .text(function(d) { return d.displayname }); 
enterDiv.append("div") 
    .attr("class", "date") 
    .text(function(d) { return d.date }); 
enterDiv.append("div") 
    .attr("class", "text") 
    .text(function(d) { return d.text }); 

tweet.transition() 
    .delay(200) 
    .style("opacity", 1); 

tweet.exit() 
    .transition() 
    .duration(200) 
    .style("opacity", 0) 
    .remove(); 

मैं भी इस मुद्दे का प्रदर्शन a jsFiddle here की स्थापना:

मेरे कोड इस प्रकार है।

Answer 1

समस्या यह है कि आप बनाए गए div एस का चयन कर रहे हैं, लेकिन प्रति डेटा तत्व एक से अधिक div बनाते हैं। अद्यतन करते समय, डी 3 डेटा को नेस्टेड div एस से मिलान करने का प्रयास करता है। चूंकि आप पहले से ही शीर्ष स्तर div एस के लिए एक विशेष कक्षा असाइन कर रहे हैं, तो फ़िक्स बहुत आसान है।

.selectAll('.tweetdiv')