This relates to D3 version 7 and an issue with the zoom transform values being retained in subsequent charts on the same page. I have researched anything I could find online or here but none answers this specific problem.
For example:
Why does this code not reset d3 zoom state?
On page load a first chart is created with a zoomed in state as the starting/default display. The user then changes chart type to display different chart. The DOM (incl. the zoom base) for the 1st chart is removed. A new DOM and d3.zoom() function is created for the new/ 2nd chart. However, looking at the transform object for the new chart it contains the values from the first chart. I have tried resetting it with the following:
var InitTransform = d3.zoomIdentity.translate(0, 0).scale(1);
GraphArea.call(_ZoomFunc.transform, d3.zoomIdentity);
And
GraphArea.call(_ZoomFunc.transform, d3.zoomIdentity);
None of them work, which is explained by the following post in that the reset must be done on the same element it was originally set on, which in my case has at this stage been removed from the DOM. Why does this code not reset d3 zoom state?
So the question is why are the zoom transform values retained after the previous chart elements have been replaced and a new d3.zoom() function created and attached to a new zoom base? Both of the following, in the 2nd chart code module shows the old zoom values.
console.log(d3.zoomIdentity);
console.log(d3.zoomTransform(GraphArea.node()));
Old values still there:
xw {k: 2.1842225416923844, x: -679.1333036533895, y: -322.552539944791}
Is there a rational explanation for this and any known solution?
