Zoom in and zoom out doesn't work for real time D3 line chart

See more:

Javascript

JavaSE6

Typescript

, +

Hello All,


Zoom in and zoom out doesn't work for real time D3 line chart. It is not able to maintain zoomed in state.

I created a real time d3 line chart as code provided in js fiddle http://jsfiddle.net/peDzT/

1403

/ . Chart successfully getting updated after every second.

What I want is -

1. For real time chart, I should be able to zoom in and zoom out in main chart and chart should able to maintain its state

2. I should be able to navigate over main chart by using navigation chart and it should be able to maintain its state. I did this, and it is working. but it looks like a dirty way of doing.

Please help me to zoom in and zoom out for real time chart as shown in jsfiddle example.

What I have tried:

What I did -

1. I implemented code and uploaded on http://jsfiddle.net/peDzT/1261>1403/ and I can do following things successfully -

2. I can successfully zoom in and zoom out but it is not able to maintain its state after refresh as you can see same in the jsfiddle

I also implemented navigation bar to move the main chart and it is working perfectly. here I am maintaining navViewportLeft and isToUpdateChart positions of view-port(of selected area from navigation bar). I thing this is not perfect solution.