Jak używać przycisku myszy i przeciągnij, aby powiększyć D3

Question

Jestem nowy D3 i chciałaby wdrożyć click-drag-zoom podobny do tego, co jest pokazane tutaj: http://www.highcharts.com/demo/line-time-series

Mam już wykres liniowy I zbudowałem, ale nie rozumiem, jak to wdrożyć.

Sądzę, że potrzebuję niektórych programów obsługi zdarzeń JS, aby znaleźć miejsce, w którym dzieje się moje mousedown i mouseup. Ale w jaki sposób utworzyć cieniowanie, które występuje na wykresie, gdy użytkownik przeciąga?

Answer 1

Prawdopodobnie będziesz chciał użyć brush, aby to zrobić w d3.js. Możesz zobaczyć przykład, który zestawiłem pod numerem http://bl.ocks.org/1962173, który robi coś podobnego.

Odpowiedni kod jest:

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

gdzie display to funkcja, która odświeża dane na podstawie aktualnego stopnia brush. W ten sposób nie trzeba próbować podpinać własnych programów obsługi, a nawet niepotrzebnie zmieniać rozmiaru podświetlonego regionu.