D3 loại bỏ dữ liệu sử dụng lối

Question

Tôi đã chuẩn bị một fiddle nhỏ để minh họa cho vấn đề here

Tôi đang gặp một vấn đề sử dụng chức năng thoát d3 để loại bỏ các yếu tố từ các dom.

Nói rằng tôi có một mảng của 10 yếu tố:

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

tôi sử dụng dữ liệu này để tạo ra một biểu đồ thanh ngang đơn giản sử dụng 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"); 

Bây giờ sau khi một sự chậm trễ ngắn Tôi muốn prune tập dữ liệu của tôi vì vậy tất cả những gì tôi đã để lại là

var truncatedData = [4,5] 

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

Dữ liệu được xóa thành công nhưng vẫn hiển thị thông tin t hai phần tử 1,4 thay vì 4,5.

Làm cách nào tôi có thể xóa tất cả trừ [4,5] khỏi nhà thờ?

Answer 1

Theo mặc định, d3 khớp với các phần tử được gán cho .data() theo chỉ mục và giá trị của chúng. Tức là, cho nó một mảng hai phần tử trong cuộc gọi thứ hai có nghĩa là hai phần tử đầu tiên từ cuộc gọi đầu tiên (chỉ số 0 và 1) được giữ lại.

Để khắc phục vấn đề này trong trường hợp của bạn, cung cấp cho một chức năng để phù hợp với các yếu tố để cuộc gọi thứ hai để .data(), ví dụ:

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

Fixed jsfiddle here.