Làm thế nào để sử dụng click chuột và kéo để phóng to D3

Question

Tôi mới đến D3 và muốn thực hiện một nhấp chuột kéo-zoom tương tự như những gì được hiển thị ở đây: http://www.highcharts.com/demo/line-time-series

Tôi đã có một đồ thị dòng tôi đã xây dựng, nhưng tôi đang bối rối như thế nào để thực hiện điều này.

Tôi đoán tôi cần một số trình xử lý sự kiện JS để tìm nơi mà chuột và chuột của tôi xảy ra. Nhưng làm cách nào để tôi tạo bóng đổ xuất hiện trên biểu đồ khi người dùng đang kéo?

Answer 1

Có thể bạn sẽ muốn sử dụng một số brush để thực hiện việc này trong d3.js. Bạn có thể thấy một ví dụ mà tôi đặt cùng nhau tại http://bl.ocks.org/1962173 thực hiện điều gì đó tương tự.

Mã liên quan là:

var brush = d3.svg.brush() 
    .x(x) 
    .extent([d3.time.monday(now),d3.time.saturday.ceil(now)]) 
    .on("brush", display); 

nơi display là một chức năng mà vẽ lại dữ liệu dựa trên mức độ hiện tại của brush. Bằng cách này bạn không cần phải cố gắng và móc xử lý của riêng bạn hoặc thậm chí lo lắng về việc thay đổi kích thước khu vực được đánh dấu ở tất cả.