javascript - 使用D3创建DIV的动态列表

我一直在使用D3创建精美的动画图表，这些示例很棒。但是，我正在尝试做一些看似更基础的事情，并且遇到麻烦-将数据绑定(bind)到简单的DIV列表。

我设置enter()以不透明度0初始化元素，设置transition()使其淡入，并设置exit()使其淡出并删除。 enter()和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();

我还设置了a jsFiddle here来演示此问题。

最佳答案

问题是您正在选择创建的div，但是每个数据元素创建一个以上的div。更新时，d3尝试将数据与嵌套的div相匹配。由于您已经为顶级div分配了一个特殊的类，因此修复非常简单。更换

.selectAll('div')

与

.selectAll('.tweetdiv')