[Solved]-How to keep current zoom scale and translate level when re-rendering graph-d3.js

I have created one fiddle for you. fiddle

Please check the function refreshGraph

  var refreshGraph =function(){
    window.resetGraph = !window.resetGraph;
  console.log(window.resetGraph);
  if(window.resetGraph){ 
    window.scale = window.zoom.scale();
    window.translate  = window.zoom.translate();

    window.zoom.scale(1).translate([0,0]);
  }else{
    window.zoom.scale(window.scale)
    .translate(window.translate);
  }
    console.log(window.zoom.scale());

  console.log(translate);

  draw();
}

I have used window.zoom (used window to let you know that this is shared)

Button reset toggles the zoom level to 0 scale and toggles back to where it was if clicked again.

Hope it helps.

I just solved it by keeping track of the current scale and translation values:

  zoom.on("zoom", function() {
        svgGroup.attr("transform", "translate(" + (<any>d3.event).translate + ")" + "scale(" + (<any>d3.event).scale + ")");  

      // keep track of the currentZoomScale and currentPosition at all times
        currentZoomScale = (<any>d3.event).scale;
        currentPosition = (<any>d3.event).translate;

  });

Then when re-rendering the graph in my scaleGraph function above I just checked to see if the graph was re-rendered because of the subGraph being toggled, if it has then I use the current scale and translation values:

  if (ctrl.autoResizeGraph !== "original" && togglingSubGraph) {
            zoomScale = currentZoomScale; // render the graph at its current scale
            translate = currentPosition; // render the graph at its current position

   }