6

私は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をここに設定しました。

4

1 に答える 1

6

問題は、作成したを選択しているが、データ要素ごとdivに複数を作成していることです。div更新時に、d3はデータをネストされたdivsに一致させようとします。すでにトップレベルに特別なクラスを割り当てているのでdiv、修正は非常に簡単です。交換

.selectAll('div')

と

.selectAll('.tweetdiv')
于 2013-01-21T12:13:29.000 に答える