1

我正在使用数组切片来分页数据。当我到达最后一页（只有 7 个元素而不是 10 个）时，我无法删除最后 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();

当然，如果您要删除退出选择，您可能还需要附加到输入选择。否则，当您到达最后一页并尝试返回时，您将永远只能停留在 7 个小节上，而不是回到 10 个小节。

于 2012-09-18T23:14:32.940 回答