CODEWITHSUNDEEP
d3.jsbrush
dmartinez
dmartinez

Reputation: 287

How to control d3.brush (right click)

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:

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.

Upvotes: 3

Views: 1315

Answers (1)

Aji Hao
Aji Hao

Reputation: 21

  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));

  2. 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();

Upvotes: 1

Related Questions