Erstellen einer dynamischen Liste von DIVs mit D3

Question

Ich habe D3 verwendet, um fancy animierte Diagramme zu erstellen, und die Beispiele sind großartig. Ich versuche jedoch etwas scheinbar Grundlegenderes zu tun und Probleme zu haben - Daten an eine einfache Liste von DIVs zu binden.

Ich habe eingerichtet, um Elemente bei Opazität 0 zu initialisieren, transition(), um sie zu verblassen, und exit(), um sie auszublenden und zu entfernen. enter() und exit() scheinen gut zu funktionieren - wenn jedoch ein Update ein bereits vorhandenes Element in der Liste enthält, scheint es teilweise entfernt zu werden - das enthaltene DIV bleibt bestehen, aber der Inhalt verschwindet. Ich kann nicht verstehen, warum sich der Inhalt des Elements auf diese Weise verändern würde.

Mein Code ist wie folgt:

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(); 

ich auch a jsFiddle here das Problem demonstriert einzurichten.

Answer 1

Das Problem ist, dass Sie die div s auswählen, die Sie erstellt haben, aber erstellen Sie mehr als eine div pro Datenelement. Beim Aktualisieren versucht d3, die Daten an die verschachtelten div s anzupassen. Da Sie der obersten Ebene div s bereits eine spezielle Klasse zuweisen, ist die Behebung sehr einfach. Ersetzen

.selectAll('div') 

mit

.selectAll('.tweetdiv')