使用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列表

回答

相關問題