배열 끝에 도달 할 때 여분의 데이터 포인트를 제거하십시오.

Question

데이터를 페이지 분할하기 위해 배열 슬라이스를 사용하고 있습니다. 마지막 페이지 (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(); 

} 

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(); 

, 당신은 출구 선택을 제거하는 경우, 아마도 enter 선택 항목에 추가해야 할 것입니다. 그렇지 않으면 마지막 페이지로 돌아가서 다시 돌아 가려 할 때 10 시가되기보다는 영원히 7 개의 막대 만 붙어 있습니다.