Applying constraints to a XY chart with zoom

[liljagustav]

I've seen a couple of questions in this forum of how to apply the zoom interaction to a chart with x and y axis. So based on the different replies and another code sandbox as foundation I think this is quite a workable example.

https://codesandbox.io/s/wip-visx-xychart-zoom-forked-hmuth?file=/src/App.js

However, I am trying to add constraints to the chart, not allowing the user to move past the upper right quadrant, but I am unsure how to accomplish this and still maintain a smooth panning interaction. As it stands now, f.e., when a user is panning along the y or x axis the panning stops because one of the constraints are fulfilled. The user is also stopped when trying to zoom out to the original state because the constraints does not allow the viewport to move beyond the upper right quadrant. And the last issue I have is that the LinePath seems to overlap the y-axis when you pan to the right.

Any answers to these issues would be most welcome.

• Constraints are hindering a smooth panning experience when nearing the lower edges of the upper right quadrant of the chart
• Constraints are hindering the user to zoom back to the original state
• LinePath seems to overlap y-axis when user pans to the right.

[tonyneel923]

Hello @liljagustav, I built a map with zoom and had some of the same issues as you. I have not had the time to work on it but one idea I had for problem 2 is to use the center point of the visualization when a user zooms back out instead of wherever the mouse is. I think that would solve the problem.