使用D3创建动态DIV列表

我一直在使用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();

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

来源

2013-01-21 Tom

+1的jsfiddle –

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

.selectAll('div')

与

.selectAll('.tweetdiv')

来源

2013-01-21 12:13:29

太棒了！谢谢你，先生。 – Tom

使用D3创建动态DIV列表

回答

相关问题