title: Creating a dynamic list of DIVs with D3
body: <p>I have been using <a href="http://d3js.org" rel="nofollow">D3</a> to create fancy animated charts, and the examples are great. However, I'm trying to do something seemingly a lot more basic, and having trouble - binding data to a simple list of DIVs.</p>
  
  <p>I set up <code>enter()</code> to initialize elements at opacity 0, <code>transition()</code> to fade them in, and <code>exit()</code> to fade them out and remove them. <code>enter()</code> and <code>exit()</code> seem to be working fine - however, when an update contains an existing element already in the list, it seems to get partially removed - the containing DIV remains, but the contents disappear. I can't understand why the contents of the element would get changed in this way.</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>I also set up <a href="http://jsfiddle.net/rWByD/1/" rel="nofollow">a jsFiddle here</a> demonstrating the issue.</p>