D3.js - API thu phóng
Phóng to giúp chia tỷ lệ nội dung của bạn. Bạn có thể tập trung vào một khu vực cụ thể bằng cách sử dụng phương pháp nhấp và kéo. Trong chương này, chúng ta sẽ thảo luận chi tiết về API thu phóng.
Định cấu hình API
Bạn có thể tải trực tiếp API thu phóng từ “d3js.org” bằng cách sử dụng tập lệnh sau.
<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>
<body>
<script>
</script>
</body>Thu phóng các phương thức API
Sau đây là một số Phương thức API thu phóng được sử dụng phổ biến nhất.
- d3.zoom()
- zoom(selection)
- zoom.transform (lựa chọn, biến đổi)
- zoom.translateBy (lựa chọn, x, y)
- zoom.translateTo (lựa chọn, x, y)
- zoom.scaleTo (lựa chọn, k)
- zoom.scaleBy (lựa chọn, k)
- zoom.filter([filter])
- zoom.wheelDelta([delta])
- zoom.extent([extent])
- zoom.scaleExtent([extent])
- zoom.translateExtent([extent])
- zoom.clickDistance([distance])
- zoom.duration([duration])
- zoom.interpolate([interpolate])
- zoom.on (tên kiểu [, người nghe])
Hãy cùng chúng tôi tìm hiểu sơ lược về tất cả các phương thức Zooming API này.
d3.zoom ()
Nó tạo ra một hành vi thu phóng mới. Chúng tôi có thể truy cập nó bằng cách sử dụng script bên dưới.
<script>
var zoom = d3.zoom();
</script>thu phóng (lựa chọn)
Nó được sử dụng để áp dụng chuyển đổi thu phóng trên một phần tử đã chọn. Ví dụ: bạn có thể khởi tạo hành vi mousedown.zoom bằng cú pháp sau.
selection.call(d3.zoom().on("mousedown.zoom", mousedowned));zoom.transform (lựa chọn, biến đổi)
Nó được sử dụng để đặt biến đổi thu phóng hiện tại của các phần tử đã chọn thành biến đổi được chỉ định. Ví dụ: chúng ta có thể đặt lại biến đổi thu phóng thành biến đổi nhận dạng bằng cú pháp bên dưới.
selection.call(zoom.transform, d3.zoomIdentity);Chúng tôi cũng có thể đặt lại biến đổi thu phóng thành biến đổi nhận dạng trong 1000 mili giây bằng cú pháp sau.
selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);zoom.translateBy (lựa chọn, x, y)
Nó được sử dụng để dịch chuyển đổi thu phóng hiện tại của các phần tử đã chọn theo các giá trị x và y. Bạn có thể chỉ định các giá trị dịch x và y dưới dạng số hoặc dưới dạng hàm trả về số. Nếu một hàm được gọi cho phần tử đã chọn, thì nó được chuyển qua dữ liệu hiện tại 'd' và chỉ mục 'i' cho DOM. Mã mẫu được xác định bên dưới.
zoom.translateBy(selection, x, y) {
zoom.transform(selection, function() {
return constrain(this.__zoom.translate(
x = = = "function" ? x.apply(this, arguments) : x,
y = = = "function" ? y.apply(this, arguments) : y
);
}
};zoom.translateTo (lựa chọn, x, y)
Nó được sử dụng để dịch chuyển đổi thu phóng hiện tại của các phần tử đã chọn đến vị trí xác định của x và y.
zoom.scaleTo (lựa chọn, k)
Nó được sử dụng để chia tỷ lệ chuyển đổi thu phóng hiện tại của các phần tử đã chọn thành k. Đây,k là một hệ số tỷ lệ, được chỉ định dưới dạng số hoặc hàm.
zoom.scaleTo = function(selection, k) {
zoom.transform(selection, function() {
k = = = "function" ? k.apply(this, arguments) : k;
});
};zoom.scaleBy (lựa chọn, k)
Nó được sử dụng để chia tỷ lệ biến đổi zoon hiện tại của các phần tử đã chọn bằng k. Đây,k là một hệ số tỷ lệ, được chỉ định dưới dạng số hoặc dưới dạng hàm trả về số.
zoom.scaleBy = function(selection, k) {
zoom.scaleTo(selection, function() {
var k0 = this.__zoom.k,
k1 = k = = = "function" ? k.apply(this, arguments) : k;
return k0 * k1;
});
};zoom.filter ([bộ lọc])
Nó được sử dụng để đặt bộ lọc thành chức năng được chỉ định cho hành vi thu phóng. Nếu bộ lọc không được chỉ định, nó sẽ trả về bộ lọc hiện tại như hình dưới đây.
function filter() {
return !d3.event.button;
}zoom.wheelDelta ([delta])
Giá trị của Δđược trả về bởi hàm delta bánh xe. Nếu delta không được chỉ định, nó sẽ trả về chức năng delta bánh xe hiện tại.
zoom.extent ([mức độ])
Nó được sử dụng để đặt mức độ cho các điểm mảng được chỉ định. Nếu phạm vi không được chỉ định, nó trả về trình truy cập phạm vi hiện tại, mặc định là [[0, 0], [width, height]], trong đó width là chiều rộng máy khách của phần tử và chiều cao là chiều cao máy khách của nó.
zoom.scaleExtent ([mức độ])
Nó được sử dụng để đặt mức tỷ lệ cho mảng số [k0, k1] được chỉ định. Đây,k0là hệ số tỷ lệ tối thiểu cho phép. Trong khi,k1là hệ số tỷ lệ tối đa cho phép. Nếu phạm vi không được chỉ định, nó trả về phạm vi tỷ lệ hiện tại, mặc định là [0, ∞]. Hãy xem xét mã mẫu được xác định bên dưới.
selection
.call(zoom)
.on("wheel", function() { d3.event.preventDefault(); });Người dùng có thể cố gắng thu phóng bằng cách xoay vòng khi đã ở giới hạn tương ứng của phạm vi tỷ lệ. Nếu chúng tôi muốn ngăn việc cuộn trên đầu vào bánh xe bất kể mức độ quy mô, hãy đăng ký trình nghe sự kiện bánh xe để ngăn hành vi mặc định của trình duyệt.
zoom.translateExtent ([mức độ])
Nếu mức độ được chỉ định, nó sẽ đặt mức độ tịnh tiến cho mảng điểm được chỉ định. Nếu mức độ không được chỉ định, nó trả về mức độ dịch hiện tại, mặc định là [[-∞, -∞], [+ ∞, + ∞]].
zoom.clickDistance ([khoảng cách])
Phương pháp này được sử dụng để đặt khoảng cách tối đa mà vùng có thể thu phóng có thể di chuyển giữa lên và xuống, điều này sẽ kích hoạt sự kiện nhấp chuột tiếp theo.
zoom.duration ([thời lượng])
Phương pháp này được sử dụng để đặt thời lượng cho quá trình chuyển đổi thu phóng khi nhấp đúp và nhấn đúp vào số mili giây được chỉ định và trả về hành vi thu phóng. Nếu thời lượng không được chỉ định, nó trả về thời lượng hiện tại, mặc định là 250 mili giây, được định nghĩa bên dưới.
selection
.call(zoom)
.on("dblclick.zoom", null);zoom.interpolate ([nội suy])
Phương pháp này được sử dụng để nội suy cho các chuyển đổi thu phóng đến chức năng được chỉ định. Nếu nội suy không được chỉ định, nó sẽ trả về nhà máy nội suy hiện tại, mặc định là d3.interpolateZoom.
zoom.on (tên kiểu [, người nghe])
Nếu trình xử lý được chỉ định, nó sẽ đặt trình xử lý sự kiện cho các kiểu được chỉ định và trả về hành vi thu phóng. Tên kiểu là một chuỗi chứa một hoặc nhiều tên kiểu được phân tách bằng khoảng trắng. Mỗi tên kiểu là một kiểu, tùy chọn theo sau bởi dấu chấm (.) Và tên, chẳng hạn như zoom.one và zoom.second. Tên cho phép nhiều người nghe được đăng ký cho cùng một loại. Loại này phải thuộc một trong các loại sau:
Start - sau khi bắt đầu thu phóng (chẳng hạn như khi chuyển sang chế độ thu nhỏ).
Zoom - sau khi thay đổi chuyển đổi thu phóng (chẳng hạn như trên di chuột).
End - sau khi thu phóng kết thúc (chẳng hạn như khi di chuột lên).
Trong chương tiếp theo, chúng ta sẽ thảo luận về các API yêu cầu khác nhau trong D3.js.