Come utilizzare clic del mouse e trascinare per ingrandire D3

Question

Sono nuovo di D3 e vorrebbe implementare un click-drag-zoom simile a ciò che viene mostrato qui: http://www.highcharts.com/demo/line-time-series

ho già un grafico a linee I hanno costruito, ma sono confuso su come implementarlo.

Suppongo di aver bisogno di alcuni gestori di eventi JS per trovare dove si verifica il mio mouse e mouse. Ma come posso creare l'ombreggiatura che si verifica sul grafico quando l'utente sta trascinando?

Answer 1

Probabilmente vorrete usare un brush per farlo in d3.js. Puoi vedere un esempio che ho messo insieme a http://bl.ocks.org/1962173 che fa qualcosa di simile.

Il codice relativo è:

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

dove display è una funzione che ridisegna dati in base alla estensione corrente di brush. In questo modo non devi cercare di agganciare i tuoi stessi gestori o addirittura preoccuparti di ridimensionare la regione evidenziata.