d3 zoom behavior when window is resized
<p>I am using D3 to set up my chart area that makes use of the zoomable behavior. The chart includes both x and y axis.</p>

<p>The chart area should be responsive when window is resized. In this case, I need to reset the x and y axis domain and range on window resizing.</p>

<p>The issue happened with window resizing. I've noticed the zoom focus isn't lined up with the mouse anymore after the following steps:</p>

<ol>
<li>First pan and zoom in the chart area</li>
<li>Then resize the window</li>
<li>Then pan and zoom the chart area again</li>
</ol>

<p>After that, the above problem happened. See the following jsfiddle which has this issue.</p>

<p>So what's the right way of handing this? I've noticed a couple discussions about this issue such as:</p>

<p><a href="https://stackoverflow.com/questions/25875316/d3-preserve-scale-translate-after-resetting-range">d3 Preserve scale/translate after resetting range</a></p>

<p>I tried this approach but I couldn't make it working using D3 V4 API. </p>