d3.js - Allow brushing and zooming on same chart - d3.js

Question

UPDATE
I finally managed to get a working solution to this challenge. Zoom incorporates event.stopPropagation(). This means that any events on elements contained within a parent element will not "bubble up" to the parent element, as per:
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture
This is how I understand it working and what I have rationalised to get my solution functional:
For brushing, the event will propagate up to ancestor elements. In my case, I have appended a 'rect' element to the svg, as per the examples in the docs, and attached the zoom behaviour to the rect. Therefore, the element with the zoom action is not a parent of the element with the brush action.
I changed the code by instead attaching the zoom behaviour to the svg (rather than the rect) so that it is an ancestor of the group element with the brush action, this will allow the action on the g element to bubble up to the svg. Now zoom can also fire as the event will bubble up from the g element.
I then put a check to see if control was clicked or not, and depending on the outcome I ran the appropriate zoom or brush function. I guess another method may be to check the source event fired, and then run only if the event was the one that we want to trigger either the zoom or brush action.
Good day,
I am having an issue where the zoom action is consuming the events on a line chart. I have seen a number of examples using context and focus, and zoom and drag with discrete elements, but none with allowing zooming and brushing on the same line/area chart.
Objective: To allow a user to either hold down ctrlKey or shiftKey to enable panning, and without the key being held down the chart will pan (using d3-zoom).
Problem: Zooming is consuming the events, as per the d3.js documentation. This prevents the brushing from ever being triggered. This means that even if I use a filter and allow the ctrlKey to be used, and then use an if-block to determine if ctrlKey has been pressed or not, the event will still never get passed the zoom handler to the brush.
I noted in early versions of d3 (seems prior to v4) this co-existing of events was not an issue for my use case, but seemed to have caused problems with multiple events being fired simultaneously for other use-cases, which caused problems. To resolve, it seems that preventDefault and stopPropagation have been implemented on the d3-zoom behaviour. This prevents allowing the event to propagate to the brush handler and then using custom logic to either zoom (in my case just pan) or brush.
Question: Does anyone know any means to allow the events to propagate without changing the d3.js code itself? I would really like be able to pan or zoom depending on whether ctrlKey is pressed, without using a toggle button to disable pointer events.
Code:
const MARGIN = { TOP: 10, BOTTOM: 80, LEFT: 120, RIGHT: 10 }
const WIDTH = 1000 - MARGIN.LEFT - MARGIN.RIGHT;
const HEIGHT = 500 - MARGIN.TOP - MARGIN.BOTTOM;
svg = d3.select(element.current)
.append("svg")
.attr("width", WIDTH + MARGIN.LEFT + MARGIN.RIGHT)
.attr("height", HEIGHT + MARGIN.TOP + MARGIN.BOTTOM);
graph = svg.append("g")
.attr("transform", `translate(${MARGIN.LEFT-50}, ${MARGIN.TOP})`)
.attr("class", "graph")
svg.append("defs")
.append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("width", WIDTH )
.attr("height", HEIGHT );
x = d3.scaleTime()
.range([0, WIDTH]);
y = d3.scaleLinear()
.range([HEIGHT , 0]);
panBehaviour = d3.zoom()
.extent([[0, 0], [WIDTH, HEIGHT]])
.translateExtent([[0, 0], [WIDTH, HEIGHT]])
.scaleExtent([1, 1])
.filter( ()=>!d3.event.button)
.on('zoom', panPlot)
pan = svg.append('rect')
.attr('class', 'pan')
.attr("transform", `translate(${MARGIN.LEFT-50}, ${MARGIN.TOP})`)
.attr("width", WIDTH )
.attr("height", HEIGHT )
.call(panBehaviour);
brush = d3.brushX()
.extent([ [0, 0], [WIDTH, HEIGHT] ])
.on("end", zoom)
graph.append('g')
.attr('class', 'brush')
.call(brush)
path = graph.append('path');
path.attr("clip-path", "url(#clip)");
// The panning function replaced with a log statement
panPlot() {
if (d3.event.sourceEvent.ctrlKey){
console.log("PANNING");
}
};
// The zoom function replaced with a log statement
zoom(){
if (!d3.event.sourceEvent.ctrlKey){
console.log("ZOOMING");
}
};
A very similar question was asked here, but with no solution. D3 v4 Brush and Zoom on the same element (without mouse events conflicting)

Answer 1

You can disable/enable pan and brush behaviors each time ctrl key is pressed/released.
These two behaviors can't coexist, so you have to disable one.
The answer is based on d3 v5.
const noZoom = d3.zoom();
const doc = d3.select(document);
doc.on('keydown', () => {
if (d3.event.key === "Control") {
pan.call(noZoom);
}
})
doc.on('keyup', () => {
if (d3.event.key === "Control") {
pan.call(panBehaviour);
}
})