Give Entire D3 Map Event Listener

Question

I have a map of the US with some featured cities plotted. States and cities have their own click events. Clicking a state zooms into the state and displays more cities within the state. When clicking a city it plots a new city and draws a path to the new city while zooming into just bring the two cities in view.

While being zoomed into the two cities I would like to be able to click anywhere on the map to have it reset. Would like to be able to do this without removing and restoring all existing click events if possible.

Anyone know a way I could put an invisible layer over the whole SVG with it's own click event?

Answer 1

Add a <rect> element that covers the whole map. If you make it fill="none" it will be invisible. Add a click event handler to do the reset function when the <rect> is clicked on.

You can then manipulate the pointer-events property to make it catch or not catch events. Setting pointer-events="all" will make it catch events while pointer-events="none" will make it pass through events. Just switch the attribute around depending on whether the map is zoomed or not.