6

ここで問題を説明するために小さなフィドルを用意しました

d3 の exit 関数を使用して dom から要素を削除する際に問題が発生しています。

10 個の要素の配列があるとします。

var data = [1 ,4, 5, 6, 24, 8, 12, 1, 1, 20]

このデータを使用して、d3 を使用して単純な横棒グラフを作成します

d3.selectAll('rect') 
.data(data) 
.enter() 
.attr("class", "rectangle")
.attr("stroke", "black")
.attr("stroke-width","1px")
.attr("fill","none")
.attr("x", 0)
.attr("y", function(d, i) { return 25 * i; } )
.attr("width", function(d) { return 22 * d; } )
.attr("height", "20");

少し遅れて、データセットを整理したいので、残っているのは

var truncatedData = [4,5]

d3.selectAll('rect')
    .data(truncatedData )   
    .exit()
    .transition()
    .delay(3000)
    .remove();

データは正常に削除されますが、最初の 2 つの要素が 4,5 ではなく 1,4 と表示されます。

dom から [4,5] 以外をすべて削除するにはどうすればよいですか?

4

1 に答える 1

20

デフォルトでは、d3.data()は、値ではなくインデックスによって指定された要素と一致します。つまり、2 番目の呼び出しで 2 要素の配列を与えるということは、最初の呼び出しの最初の 2 つの要素 (インデックス 0 と 1) が保持されることを意味します。

あなたのケースでこの問題を解決するには、要素を の 2 番目の呼び出しに一致させる関数を指定します.data()。

.data([5, 6], function(d) { return(d); })

ここでjsfiddle を修正しました。

于 2013-03-05T17:54:15.970 に答える