使用D3创建动态DIV列表

我一直在用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 ，但每个数据元素创建多个div 。 更新时，d3尝试将数据与嵌套的div匹配。 由于您已经为顶级div分配了一个特殊类，因此修复非常简单。 更换

 .selectAll('div') 

同

 .selectAll('.tweetdiv')