使用 D3 创建 DIV 动态列表

我一直在使用D3 http://d3js.org创建精美的动画图表，并且示例很棒。然而，我正在尝试做一些看似更基本的事情，但遇到了麻烦 - 将数据绑定到简单的 DIV 列表。

我设置了enter()以不透明度 0 初始化元素，transition()让它们淡入，并且exit()将它们淡出并删除。enter() and exit()似乎工作正常 - 然而，当更新包含列表中已有的现有元素时，它似乎被部分删除 - 包含的 DIV 仍然存在，但内容消失了。我不明白为什么元素的内容会以这种方式改变。

我的代码如下：

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

我也设置了这里有一个 jsFiddle http://jsfiddle.net/rWByD/1/演示该问题。

问题是你选择的是div您创建了一个，但创建了多个div每个数据元素。更新时，d3 尝试将数据与嵌套的匹配divs。因为您已经为顶层分配了一个特殊的类divs，修复非常简单。代替

.selectAll('div')

with

.selectAll('.tweetdiv')