D3 behaviors, such as d3.zoom, work by responding to events which pass
through the element on which they are called. If the element has children, the
behavior will be called as long as the children don’t block events’
propagation. This is often beneficial. If we want to be able to zoom on a
populated SVG, we need only call the zoom behavior on the root node and we’ll
be able to pan and zoom even if we drag and scroll on the child elements.
There are times, however, when we may want to ignore certain elements without having the block the propagation of the event. For this, there is event filtering. By filtering events, we can let them pass through without having to block or process them. This can be seen in the example below where dragging the background leads to panning, while dragging the circles has no effect.
The crux of the code for this example is a simple check to see that handled
events have not passed though an element with a no-zoom class.
var zoom = d3v4.zoom()
.filter(() => { return !d3v4.event.path[0].classList.contains('no-zoom') })
.on('zoom', function(d) { g.attr('transform', d3v4.event.transform); });
A bl.ock of this example can be found here.