I have a d3 Force-Directed Graph, on which I have implemented zoom functionality. My requirement is to save the current zoom attributes (scale and translate) and when the page is reloaded I have to render graph with the saved zoom attributes.
When the page is reloaded I am setting the zoom scale and translate to the previously saved values, something like this.
this.zoom.scale(previous-scale)
.translate(previous-translate);
And then I get the scale and translate on the graph.
this.svgGraph.attr("transform", `translate(${previous-scale})scale(${previous-translate})`);
The graph is loading fine with the zoom level which was the last present.
My problem is now when I try to zoom in or zoom out the zoom operation is not happening on current mouse position as it was behaving earlier.
To set the zoom afterward I'm using
this.svgGraph.attr("transform", `translate(${_event.translate})scale(${_event.scale})`);
Does anybody knows the reason for this ??
Note: I am using d3 v3