1

データをページングするために配列スライスを使用しています。最後のページ (要素が 10 ではなく 7 つしかないページ) に到達すると、最後の 3 つのバーを削除できません。.exit().remove() はページの他の要素では機能しますが、何らかの理由でバーでは機能しません。最後のページのバー 8 ～ 10 を削除するにはどうすればよいですか?

jsfiddle の例を次に示します: http://jsfiddle.net/PMEAT/1/

jsfiddle のコードは次のとおりです。

var data = [1,1,1,1,1,1,1,1,6,7,3,3,3,3,3,3,3];
var chart = d3.select("body").append("svg")
.attr("class","chart")
.attr("width",440)
.attr("height",300);
var barnumber = 10;
var page = 1;

var y = d3.scale.linear()
.domain([0,10])
.range([0,300])

var viewdata = data.slice((page-1)*barnumber,page*barnumber);

var rect = chart.selectAll("rect")
.data(viewdata);

rect.enter().insert("rect")
    .attr("x",function(d,i){ return i*20})
    .attr("y",function(d) {return 300 - y(d);})
    .attr("width", 20)
    .attr("height", y);

chart.selectAll("text")
.data(viewdata)
    .enter().append("text")
    .attr("x", function(d,i) { return i*20+8; })
    .attr("y", 290)
    .text(String);

$('#next').click(function() {
    page++;
    viewdata = data.slice((page-1)*barnumber,page*barnumber);
    redraw();
});

$('#last').click(function() {
    page--;
    viewdata = data.slice((page-1)*barnumber,page*barnumber);
    redraw();
});

function redraw() {
rect.data(viewdata)
    .transition()
    .duration(500)
    .attr("x",function(d,i){ return i*20})
    .attr("y",function(d) {return 300 - y(d);})
    .attr("width", 20)
    .attr("height", y);

    chart.selectAll("text")
.data(viewdata)
     .transition()
    .duration(500)
    .text(String);

rect.exit().remove();

}
4

1 に答える 1

1

データ演算子は、データ結合をインプレースで計算しません。新しい選択を返します。selection.dataの結果を保存していないため、rect選択内容が更新されていません。

データ結合の更新選択から直接遷移をチェーンするのではなく、最初にデータ結合を保存する必要があります。

// First save the result of the data-join.
rect = rect.data(viewdata);

// Then update.
rect.transition()
    .duration(500)
    …

// Then exit.
rect.exit().remove();

もちろん、終了選択を削除する場合は、おそらく開始選択にも追加する必要があります。そうしないと、最後のページに戻って戻ろうとすると、10 に戻るのではなく、永遠に 7 小節しか表示されないままになります。

于 2012-09-18T23:14:32.940 に答える