Question

I’m trying to adapt the ‘zoom’ example in the D3.js repo to work with a line chart. The original, working zoom example can be found here – just select an area in the smaller graph to zoom in the larger graph:

http://nestoria.darkgreener.com/zoom.html

Nice! My line chart adaptation (working from the ‘line’ example that also ships with D3) is here, but it’s not quite working. As you’ll see, when you click on the smaller graph, the x-axis on the larger graph zooms correctly, but the line does not:

http://nestoria.darkgreener.com/line.html

I think the problem is here in the line.html source:

focus.select("path").attr("d", area);

It should probably be

focus.select("path").attr("d", line);

But that doesn’t help. Basically, I’m not completely how the revised data from context actually updates the line in focus. Please ccould anyone explain what I’m doing wrong?

I’ve created a jsfiddle here to make it easier: http://jsfiddle.net/MYWRS/4/

Answer 1

Change the

focus.select("path").attr("d", area);

to

focus.selectAll("path").attr("d", line);

and you’ll see the line update. This is only part of what needs to be done — as you can see, the points are not updated and the line is not clipped correctly.

My suggestion is to refactor what you currently have and wrap the calls that create the line and points in a function that takes the range to be displayed as an argument. With the current code the correct functionality would be harder to achieve because the code that draws the line doesn’t actually explicitly take data or a range.

You might also want to have a look at dygraphs, which might provide all the functionality you want already.