我一直在使用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')
关于javascript - 使用 D3 创建 DIV 的动态列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14438214/