到达数组末尾时删除额外的数据点

Question

我正在使用数组切片来翻阅数据。当我到达最后一页（只有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(); 

} 

Answer 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.