Giới hạn miền khi phóng to hoặc quét trong D3.js

Question

Tôi đã triển khai biểu đồ đường D3.js đơn giản có thể được thu phóng và quét. Nó dựa trên ví dụ tuyệt vời của Stephen Bannasch here.

Miền dữ liệu của tôi là [0, n] trong thứ nguyên x.

Làm cách nào để giới hạn thu phóng và xoay sang miền này bằng hành vi thu phóng được tích hợp sẵn (tức là sử dụng sự kiện con lăn chuột)?

Tôi muốn ngăn người dùng quét quá 0 ở đầu dưới hoặc n ở đầu phía trên, ví dụ: họ không bao giờ có thể thấy giá trị âm trên trục x và muốn giới hạn phóng to cùng một cửa sổ .

Ví dụ mà tôi tìm thấy dựa trên Jason Davies làm việc sử dụng mức độ ([...], [...], [...]) dường như không hoạt động trong phiên bản 2.9.1 nữa. Rất tiếc, hành vi thu phóng hiện là một trong số ít tính năng không được ghi lại trong tài liệu API nổi bật khác.

Mọi con trỏ đều được chào đón.

PS. Tôi đã đăng cùng một câu hỏi trên danh sách gửi thư D3.js nhưng không nhận được phản hồi: https://groups.google.com/d/topic/d3-js/w6LrHLF2CYc/discussion. Xin lỗi cho việc đăng tải chéo.

Answer 1

Bạn chỉ cần giới hạn miền khi vẽ lại. Mã sau đây sẽ ngăn không cho đồ thị bị thu nhỏ qua các tên miền ban đầu của nó (như được sử dụng trong http://bl.ocks.org/1182434).

SimpleGraph.prototype.redraw = function() { 
    var self = this; 
    return function() { 

    self.x.domain([Math.max(self.x.domain()[0], self.options.xmin), Math.min(self.x.domain()[1], self.options.xmax)]); 

    self.y.domain([Math.max(self.y.domain()[0], self.options.ymin), Math.min(self.y.domain()[1], self.options.ymax)]); 

    .... 

Answer 2

Đáng buồn thay, giải pháp được đăng bởi Bill chỉ thực hiện một nửa mẹo: Nó làm cho biểu đồ bị bóp méo nếu thu phóng được áp dụng. Đó là sau đó thường không thể trở lại một đồ thị đúng tỷ lệ và vị trí.

Trong phiên bản sau, tỷ lệ của các trục được duy trì, ngay cả khi cuộn đến các đường viền.

Ngay sau khi chia tỷ lệ đạt 100%, các miền của vảy được đặt lại về vị trí ban đầu. Điều này đảm bảo một vị trí chính xác, ngay cả khi các bước trung gian trả về các thông số bất hợp pháp cho các trục.

Trong khi không hoàn hảo, tôi hy vọng tập lệnh này có thể giúp ai đó cho đến khi d3 (lại) triển khai tính năng này.

# x and y are the scales 
# xAxis and yAxis are the axes 
# graph is the graph you want attach the zoom to 

x0 = x.copy() 
y0 = y.copy() 

successfulTranslate = [0, 0] 

zoomer = d3.behavior.zoom() 
    .scaleExtent([1,2]) 

onZoom = -> 
    ev = d3.event # contains: .translate[x,y], .scale 
    if ev.scale == 1.0 
    x.domain x0.domain() 
    y.domain y0.domain() 
    successfulTranslate = [0, 0] 
    else 
    xTrans = x0.range().map((xVal) -> (xVal-ev.translate[0])/ev.scale).map(x0.invert) 
    yTrans = y0.range().map((yVal) -> (yVal-ev.translate[1])/ev.scale).map(y0.invert) 
    xTransOk = xTrans[0] >= x0.domain()[0] and xTrans[1] <= x0.domain()[1] 
    yTransOk = yTrans[0] >= y0.domain()[0] and yTrans[1] <= y0.domain()[1] 
    if xTransOk 
     x.domain xTrans 
     successfulTranslate[0] = ev.translate[0] 
    if yTransOk 
     y.domain yTrans 
     successfulTranslate[1] = ev.translate[1] 
    zoomer.translate successfulTranslate 

graph.select('g.x.axis').call(xAxis) 
graph.select('g.y.axis').call(yAxis) 
drawBars() 

zoomer.on('zoom', onZoom) 

# ... 
graph.call(zoomer)