Tworzenie dynamicznej listy DIV za pomocą D3

Question

Używam D3 do tworzenia fantazyjnych animowanych wykresów, a przykłady są świetne. Jednak staram się zrobić coś na pozór znacznie prostszego i mając kłopot - wiążąc dane z prostą listą DIV.

skonfigurować enter() zainicjować elementów z kryciem 0, transition() zanikać je i exit() zanikać je i usunąć je. enter() i exit() wydają się działać bez zarzutu - jednak, gdy aktualizacja zawiera istniejący element już na liście, wydaje się, że została częściowo usunięta - zawierający DIV pozostaje, ale zawartość znika. Nie mogę zrozumieć, dlaczego zawartość tego elementu zostanie zmieniona w ten sposób.

Mój kod wygląda następująco:

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

ja również skonfigurować a jsFiddle here wykazania problem.

Answer 1

Problem polega na tym, że wybierasz div s, które utworzyłeś, ale utworzysz więcej niż jeden div dla każdego elementu danych. Podczas aktualizacji d3 próbuje dopasować dane do zagnieżdżonych div s. Ponieważ już przypisujesz specjalną klasę do najwyższego poziomu div s, poprawka jest bardzo prosta. Wymienić

.selectAll('div') 

z

.selectAll('.tweetdiv')