D3 zoom large images performance has huge lag

[stripathix]

I am using d3.geo and d3.zoom to create a 2d map. It works pretty nice initially but as i zoom in. It keeps getting lag. More i zoom more lag it has. Having a big resolution image (5120x2880) to map SVG I can't understand why it happens.

Code: https://plnkr.co/edit/frhUsAwC6cBU3V5q

Steps I am doing:

1. Create an SVG of a world map using geojson with d3.geo.
2. Add 10 images to SVG which by default all display:none except the first one. The bounding box of the images is on the USA.
3. Then enabled zoom on this whole SVG so images get zoomed with a map.
4. Have a slider on top with range 0-9. Depending on the value slider is on I show the corresponding image and hide all others.

Now sliding slider back and forth it switches images rendered. It is pretty smooth. But as I keep zooming in soon slider has a huge lag. Although the only thing I do with slider is just showing and hide the image.

Plunker I created for this: https://plnkr.co/edit/frhUsAwC6cBU3V5q

Looks like:

[mbostock]

Please use Stack Overflow tag d3.js to ask for help. Stack Overflow provides a better collaborative forum: thousands of D3-related questions have been asked there, and some answers may be relevant to you.

When asking for help, please include a link to demonstrate the issue, preferably as an Observable notebook. It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗