2016-03-13 81 views

Trả lời

2

Tôi không chắc chắn nhưng tôi nghĩ đây chỉ là một mẹo với quy mô D3.

Điều gì xảy ra là nó nhận được lựa chọn bên dưới (đó là phép chiếu 100% với thời gian từ 0 đến 100) và vẽ thang tỷ lệ mới từ thời gian 50 đến 80 với cùng độ rộng.

Điều này sẽ làm cho quy mô thay đổi theo cách giống như bạn đã phóng to vào thời điểm đó đúng lúc.

8

Thẳng thắn, không có thu phóng nào xảy ra.

var brush = d3.svg.brush() 
        .x(x) 
        .on("brush", display);//this calls display function on brush event drag. 

Chức năng hiển thị bên trong.

 minExtent = brush.extent()[0],//this give the brush extent min 
     maxExtent = brush.extent()[1],//this give the brush extent max 

Dựa trên max và min của bàn chải lọc dữ liệu:

visItems = items.filter(function(d) {return d.start < maxExtent && d.end > minExtent;}); 

Đặt lại tên miền với max và min của bàn chải.

x1.domain([minExtent, maxExtent]); 

Chọn tất cả hình chữ nhật ở khu vực phía trên không có dữ liệu liên kết bàn chải với DOM. cập nhật nó với quy mô mới đánh giá cao

rects = itemRects.selectAll("rect") 
      .data(visItems, function(d) { return d.id; }) 
     .attr("x", function(d) {return x1(d.start);}) 
     .attr("width", function(d) {return x1(d.end) - x1(d.start);}); 

tạo ra bất kỳ hình chữ nhật mới nếu dữ liệu hiện diện nhưng DOM là không có mặt.

rects.enter().append("rect") 
     .attr("class", function(d) {return "miniItem" + d.lane;}) 
     .attr("x", function(d) {return x1(d.start);}) 
     .attr("y", function(d) {return y1(d.lane) + 10;}) 
     .attr("width", function(d) {return x1(d.end) - x1(d.start);}) 
     .attr("height", function(d) {return .8 * y1(1);}); 

Hủy bỏ tất cả các hình chữ nhật outsside mức độ bàn chải hoặc không nằm trong mục danh sách lọc visItems

rects.exit().remove(); 

Chính xác tương tự cho nhãn như làm cho hình chữ nhật trên.

Hy vọng điều này sẽ xóa hết mọi nghi ngờ của bạn.

Các vấn đề liên quan