Steps to zoom and pan time series line graph

[Les Hartzman]

I've been going through the code for bl.ocks.org/stepheneb/1182434 to try and understand the panning and zooming aspects of D3, but it's not very clear. I'm not sure, but I think that there are some unused functions.

In either case, I need to take a time series line graph (values on y-axis defined with a linear scale; time on the x-axis defined with a time scale).

What are the steps that I need to take to zoom and update the display (how much is done for me by 'zoom', if any). And what do I need to do for panning to prevent the scales from going below 0 on Y and initial time on X (pan up and back to 'home' and right and back to 'home')?

Do I have to determine which data points have to be redrawn with 'path' elements?  What about the circles I put over every path endpoint that holds the plotted value? For the example mentioned above, it seems like it may just be the circles that he puts on the graph.

If there is a site that has a nice recipe (or jsfiddle), that explains this, I would really appreciate the help.

Thanks.

Les

[Philip Pedruco]

Hi again Les,

A couple of quick thoughts.  Firstly have you seen this bl.ock?  It really helped me to better understand axis zooming..  The other tip that might be helpful is linear.clamp.

Cheers

[Les Hartzman]

Hi Philip,

I did try that example. But when I incorporate it, the axes zoom (though not correctly), but the line path remains the same.

I don't know if the problem is due to the x-axis being a time scale instead of a linear scale, but I'm having problems finding an example that doesn't seem to require redrawing everything, including manually putting in the axes tick marks. It also seems like all other software solutions, there is very little in common between example. I've seen some that put in the attribute "pointer-events" with a value of "all", and others, like that one you sent, that don't. I figured out that you need to have a rectangle that elements are put into so that you don't have to precisely select an element when trying to zoom.

Les

[Les Hartzman]

And now I've got it where I double-click in the window and the line disappears.

Here is the jsFiddle.

[Philip Pedruco]

Hi Les,

I've bumped your fiddle to here which is working the way I think you intended. I've done two things; 

I've added a reference to the the domain in the x variable (and the same to the y) so that in the information is there when zoomed calls xAxis (and yAxis); and  

The other thing is I've added a clip path to stop the lie chart rolling over the edges of the chart (and I borrowed from this Stack Overflow question).

I've also shifted things around to make sure they were available when required (like the data).

Hope this helps.

[Les Hartzman]

Philip,

You are a gentleman and a scholar! Thank you so much!

I was under the impression that the domains for x & y couldn't be set before the data was read in (based on another example I was working from). I would have thought that by the time the data and the axes were displayed, the domains would already have been set by the time of zooming. Or are the domains recalculated for every call to x & y?

I saw the use of clip-path in other examples, but I was expecting a more complex type of problem to require that. Clearly I shouldn't have assumed that. You substituted the jsFiddle for the SO question (I think I've seen that same question before!)

I do have one quick question about the pan-zoom example you referred me to, as well as the jsFiddle from the SO question. In neither case are there any (obvious) commands to generate a grid. Where are the grid lines coming from?

Thanks again!

Les

[Les Hartzman]

Never mind about the grid. I missed the grid-generating commands - eyes passed over too quickly.

[Philip Pedruco]

Hi Les,

For the x & y domains I *think* its more of a scope issue, although I haven't investigated it.

Cheers