Geek asks and answers

How to use mouse click and drag to zoom D3

I am new to D3 and would like to implement click-to-zoom scaling, similar to what is shown here: http://www.highcharts.com/demo/line-time-series

I already have a line chart that I built, but I don’t understand how to implement this.

I think I need some JS event handlers to find where my mousedown and mouseup happen. But how to create shading that occurs on the graph when the user drags?

+5
source share
1 answer

You probably want to use one brushfor this d3.js. You can see an example that I put together at http://bl.ocks.org/1962173 that does something similar.

Relevant Code:

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

where displayis a function that redraws data based on the current length brush. This way, you don’t have to try to hook your handlers or even worry about resizing the selection at all.

+4
source

More articles:


All Articles