使用 D3 创建 DIV 的动态列表

Posted 2023-05-08

【中文标题】使用 D3 创建 DIV 的动态列表

【英文标题】：Creating a dynamic list of DIVs with D3

【发布时间】：2013-01-04 11:34:59

【问题描述】：

我一直在使用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 来演示这个问题。

【参考方案1】：

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

.selectAll('div')

与

.selectAll('.tweetdiv')