Creazione di un elenco dinamico di DIV con D3

Question

Ho utilizzato D3 per creare grafici animati di fantasia e gli esempi sono fantastici. Tuttavia, sto cercando di fare qualcosa di apparentemente molto più basilare e di avere problemi: legare i dati a un semplice elenco di DIV.

Ho impostato enter() per inizializzare gli elementi con opacità 0, transition() per attenuarli e exit() per attenuarli e rimuoverli. enter() e exit() sembrano funzionare bene - tuttavia, quando un aggiornamento contiene già un elemento già presente nell'elenco, sembra essere parzialmente rimosso - il DIV contenente rimane, ma i contenuti scompaiono. Non riesco a capire perché il contenuto dell'elemento venga modificato in questo modo.

Il mio codice è il seguente:

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

ho anche creato a jsFiddle here dimostrando la questione.

Answer 1

Il problema è che stai selezionando il div s che hai creato, ma crea più di uno div per elemento dati. Durante l'aggiornamento, d3 tenta di abbinare i dati ai nidificati div s. Poiché stai già assegnando una classe speciale ai div di livello superiore, la correzione è molto semplice. Sostituire

.selectAll('div') 

con

.selectAll('.tweetdiv')