Tôi đang sử dụng d3.js v4. Tôi hiện đang triển khai thu phóng có lập trình. Điều này Panning and Zooming Tutorial đã giúp rất nhiều. Zoom của tôi hoạt động với bánh xe cuộn, nhưng tôi muốn tạo các nút để thu phóng. Tôi biết điều cần thiết để phóng to và thu phóng là bản dịch [tx, ty] và hệ số tỷ lệ k. Tôi đang sử dụng thời gian cho trục x của tôi. Tôi đã quản lý để có được tx và hệ số tỷ lệ của k, bằng cách nhận giá trị pixel của p1 (point 1) và p2(point 2) trên trục x và sau đó sử dụng các giá trị đó để lấy k (Hệ số tỷ lệ). Giống như ví dụ:Số phát hành w/Thu phóng có lập trình v4
var k = 500/(xScale(p2) - xScale(p1)); //500 is desired pixel diff. between p1 and p2, and xScale is my d3.scaleTime() accessor function.
// for this zoom i just want the first value and last value to be at scale difference of the entire width.
Sau đó, tôi tính toán tx của thành viên này:
var tx = 0 - k * p1;
Sau đó ăn nó sang một d3.zoomIdentity() và rescaling xdomain tôi. Tôi đã tạo một nút để thu nhỏ lại. Vấn đề là khi tôi phóng to và sau đó cố gắng sử dụng nút để thu nhỏ, nó thu nhỏ nhưng co lại trục x. Tôi dường như không thể tìm ra lý do tại sao nó thu hẹp trục x thay vì thu nhỏ lại chính xác.
My JSFiddle
https://jsfiddle.net/codekhalifah/Lmdfrho7/2/
Những gì tôi đã cố gắng
- đọc zoom Documentation
- Đọc qua chương về zoom trong D3.js in action
Mã My
Sau khi bánh xe zoom được áp dụng tôi chạy chức năng này:
function zoomed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
var t = d3.event.transform;
console.log(t);
console.log(xScale.domain());
xScale.domain(t.rescaleX(x2).domain());
usageAreaPath.attr("d", area);
usageLinePath.attr('d',line);
weatherAreaPath.attr('d',weatherChart.area);
focus.select(".axis--x").call(xAxis);
focus.selectAll('.circle')
.attr('cx', function(d) { return xScale(getDate(d)); })
.attr('cy', function(d) { return yScale(d.kWh); })
.attr("transform", "translate(0," + 80 + ")");
... other non related items
}
Các zoom hoạt động đúng, nhưng sau khi phóng to và sau đó tự cố gắng để phóng to vị trí trở lại bình thường tôi muốn. tay nút zoom chức năng My
function programmaticZoom(){
var currDataSet = usageLinePath.data()[0], //current data set
currDataSetLength = currDataSet.length,//current data set length
x1 = currDataSet[0].usageTime, //getting first data item
x2 = currDataSet[currDataSetLength-1].usageTime, //2nd data item
x1px = xScale(moment(x1)), //Get current point 1
x2px = xScale(moment(x2)); // Get current point 2
// calculate scale factor
var k = width/(x2px - x1px); // get scale factor
var tx = 0 - k * x1px; // get tx
var t = d3.zoomIdentity.translate(tx).scale(k); //create zoom identity
xScale.domain(t.rescaleX(window.x2).domain());
usageAreaPath.attr("d", area);
usageLinePath.attr('d',line);
weatherAreaPath.attr('d',weatherChart.area);
focus.select(".axis--x").call(xAxis);
focus.selectAll('.circle')
.attr('cx', function(d) { return xScale(getDate(d)); })
.attr('cy', function(d) { return yScale(d.kWh); })
.attr("transform", "translate(0," + 80 + ")");
}
chỉ để rõ ràng; bạn muốn nút thu phóng của mình luôn thu phóng lại chế độ xem ban đầu mặc định? – Hamms
@Hamms Vâng tôi muốn thực sự có thể phóng to các cấp độ khác nhau. Đây chỉ là cấp độ thử nghiệm đầu tiên của tôi. Nhưng trên Timescale tôi muốn thu phóng từ xem tháng, để xem tuần, đến một ngày, đến giờ, đến 15 phút. Mức độ thử nghiệm đầu tiên của tôi chỉ là trở lại để nhìn thấy tháng. – inspired
@Hamms bất kỳ ý tưởng nào? – inspired