How to control d3.brush (right click) - d3.js

Question

I was wondering how to have a better control of my d3.brush component.
I would like to have some extra controls on it, like:
right click (opens a special menu, instead of regular browser one - and instead of strange brush behavior )
been able to disable the resizable (i.e. allowing the user to only move the brush and not resizing it) brush feature (whenever I want to control it)
I've already read some older similar questions here but no luck so far.
I can already read when a right click happend on my brush area with:
//code from an older post
function rightClick() {
if (d3.event.sourceEvent.which == 3 || d3.event.sourceEvent.button
== 2) { //3==firefox, 2==ie
return true;
} else {
return false;
}
}
and here is my code that uses the rightClicl() return:
function brushed() {
if(rightClick()){
console.log("Right click : " + rightClick());
}
else {
console.log("Right click <false> : " + rightClick())
x.domain(brush.empty() ? x.domain() : brush.extent());
if(!brush.empty()){
//do something and redraw it
}
else{ //correctiong when brush.empty() restables x.domain to general value
resetView();
}
}//end-of first else
}
but every time rightClick() is true, I still have my brush acting "as a regular" left-click.
Any help / insight is appreciated.
Thank you for your time.

Answer 1

Context menu
I'm using this d3-context-menu for showing context menu on svg elements.
However the plugin can not be used on d3.brush rects directly. The right mousedown event will also trigger brush event. I tried event.stopImmediatePropagation(), it worked.
g.selectAll(".extent")
.on("mousedown", function() {
if (d3.event.button === 2) { // only enable for right click
d3.event.stopImmediatePropagation();
}
})
.on("contextmenu", d3.contextMenu(menu));
Disable resize
It seems that d3 has no explicit option for that feature.
But you can remove the resize rects in brush group.
// after call brush
brushG.selectAll(“.resize”).remove();