Tôi đã xem xét khối d3.js này Timeline with Zoom. Tuy nhiên, tôi không thể tìm ra cách chức năng zoom thực sự được thực hiện. Ai đó có thể giúp tôi hiểu không?D3.js: Tìm hiểu về phương diện thu phóng của svg
Trả lời
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.
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.
- 1. D3.js Đặt mức thu phóng ban đầu
- 2. D3.js Thu phóng và di chuyển biểu đồ cây có thể thu gọn
- 3. SVG vào Canvas với d3.js
- 4. Plugin để thu phóng và xoay SVG
- 5. Đặt lại các thuộc tính thu phóng d3
- 6. Cách đặt màu nền của svg D3.js?
- 7. Phóng to biểu đồ dạng thanh với d3.js
- 8. Phóng to và thu phóng hình ảnh svg bằng raphael.js hoặc một số thư viện js khác
- 9. gặp sự cố khi giới thiệu về d3.js
- 10. Firefox đang gặp khó khăn về thư viện svg d3.js?
- 11. D3.js: 'g' trong .append ("g") mã D3.js là gì?
- 12. Fit văn bản sang SVG tử (Sử dụng D3/JS)
- 13. Zoom.scaleExtent() làm gì trong d3.js?
- 14. Tái xuất hiện HTML sau khi thu phóng bằng Dagre d3
- 15. D3: Có thể thu phóng + xoay một trục và chỉ xoay một trục khác không?
- 16. Tôi có thể di chuyển phần tử SVG giữa các nhóm SVG, trong d3.js
- 17. Mapbox GL JS: thu phóng đến đa giác được lọc?
- 18. Tìm hiểu về Traceview
- 19. Giới hạn miền khi phóng to hoặc quét trong D3.js
- 20. Bản địa hóa của d3.js (ví dụ d3.locale về cách sử dụng)
- 21. Sách/Hướng dẫn để tìm hiểu SVG
- 22. d3.js Thêm một vòng tròn trong d3.geo.path
- 23. chiếu d3.js tỷ lệ
- 24. Bản đồ D3 Hiệu suất SVG
- 25. Nhận Diện tích hoặc Phần tử trong Thu phóng Scatterplot
- 26. Tìm giao lộ của đường dẫn SVG
- 27. D3.js vs Raphael.js
- 28. sự khác biệt giữa hai khối mã trong d3.js
- 29. Đồ thị phân lớp trong d3.js
- 30. d3.js & nvd3.js - Cách đặt phạm vi trục y