使用D3创建动态DIV列表

Question

我一直在使用D3来制作精美的动画图表,这些例子很棒.但是,我正在尝试做一些看似更基本的事情,并且遇到麻烦 - 将数据绑定到一个简单的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();

我还在这里设置了一个jsFiddle来演示这个问题.

Answer 1

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

.selectAll('div')

同

.selectAll('.tweetdiv')