Pan/zoom scale scale?

Question

Tôi đang sử dụng d3 để hiển thị biểu đồ gantt được đơn giản hóa, với panning và phóng to bằng d3.behavior.zoom.

Tỷ lệ x là thang thời gian (được sửa đổi một chút để căn giữa ngày theo lịch trong cột, v.v.) và hoạt động tốt, nhưng tôi gặp sự cố khi quyết định cách thu phóng/chia tỷ lệ y, miền của ai là danh sách nhiệm vụ thường sẽ quá nhiều để vừa với khu vực biểu đồ, vì vậy cần phải xoay/thu phóng.

Có cách nào để cho biết quy mô thứ tự mặc định để phản ứng với các sự kiện phóng to/thu nhỏ hay tôi nên viết thang đo tùy chỉnh? Và nếu tôi cần viết một quy mô tùy chỉnh, sẽ tốt hơn là căn cứ vào d3.scale.ordinal (có lưu trữ toàn bộ danh sách tác vụ và chỉ sử dụng tập con có thể nhìn thấy làm miền của nó) hay trên d3.scale. tuyến tính (và sau đó thực hiện một cái gì đó tương tự như quy mô thứ tự cho rangebands vv?).

Hoặc có điều gì đó tôi thiếu (hoàn toàn có thể xảy ra vì đó là dự án đầu tiên của tôi sử dụng d3)?

Answer 1

Mở rộng một chút từ câu trả lời trước đây của tôi khi tôi được liên hệ riêng tư giải thích làm thế nào tôi đã làm điều này.

Đầu tiên, một ảnh chụp màn hình của ứng dụng được đề cập, công việc hiện tại là tổng hợp và hiển thị dữ liệu lập kế hoạch được thu thập từ nhiều nguồn khác nhau (tệp PowerPoint, cơ sở dữ liệu công ty, v.v.).

Các bit có liên quan là trục tung bên phải với các dấu chấm màu, trong đó mỗi dấu chấm tượng trưng cho nỗ lực của dự án và tổ chức tham gia. Vùng màu xám trên trục là bàn chải d3.js và có thể được quét/thu nhỏ lại để thay đổi dữ liệu biểu đồ/bảng trong thời gian thực.

// the axis is a regular ordinal axis, with a brush 
y2 = d3.scale.ordinal(), 
brush = d3.svg.brush().y(y2).on('brush', brushReact), 
// [...] 
// brush event handler 
function brushReact() { 
    if (tasksSlice == null) 
     return; 
    var yrb = y2.rangeBand(), 
     extent = brush.extent(), 
     s0 = Math.round(extent[0]/yrb), 
     s1 = Math.round(extent[1]/yrb); 
    if (s0 == tasksSlice[0] && s1 == tasksSlice[1]) 
     return; 
    tasksSlice = [s0, s1]; 
    inner.refresh(); 
} 

gì xảy ra bên trong xử lý là khá đơn giản:

• có được mức độ cọ
• transpose nó để chỉ số trong mảng dữ liệu của tôi
• lát mảng dữ liệu của tôi và thiết lập các kết quả như dữ liệu để hiển thị
• làm mới biểu đồ và bảng

Tôi hy vọng điều này sẽ xóa nó.

Answer 2

Hóa ra nó không phải là khó khăn, tôi đã phải:

• viết một quy mô tùy chỉnh, chủ yếu là giống hệt nhau để d3.scale.ordinal, ngoại trừ việc nó lưu trữ đầy đủ các giá trị tên miền và thực hiện một lát ([min, max]) phương pháp đặt phạm vi giá trị tên miền hiển thị
• theo dõi đồng bằng dịch y trong gọi lại sự kiện thu phóng và thêm nó vào biến lưu tổng số bản dịch y
• kiểm tra xem tổng số tiền dịch là > = so với y delta giữa hai giá trị phạm vi, nếu nó được kiểm tra rằng chúng tôi chưa có trên một trong các (có thể nhìn thấy hoặc không nhìn thấy được) tên miền giới hạn (0 hoặc độ dài) và nếu chúng tôi không tăng hoặc giảm các chỉ mục lát xuống 1, hãy đặt lại biến tổng số bản dịch, sau đó vẽ lại trục