Как управлять d3.brush (правый щелчок)

Question

Мне было интересно, как лучше контролировать мой компонент d3.brush. Я хотел бы иметь некоторые дополнительные элементы управления на ней, как:

• правой кнопкой мыши (открывает специальное меню, а не обычный браузер один - и вместо странного поведения кисти)
• смог отключить изменяемыми (т. е. позволяя пользователю только перемещать кисть и не изменять ее размер). Функция кисти (всякий раз, когда я хочу ее контролировать)

Я уже прочитал несколько старых подобных вопросов здесь, но пока не повезло.

я уже могу читать, когда правой кнопкой мыши случилось на моей кисти области с:

//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; 
     } 
} 

и вот мой код, который использует rightClicl() возвращение:

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 
} 

, но каждый раз, когда RightClick() верно, у меня все еще есть моя кисть, действующая как «обычный» щелчок левой кнопкой мыши.

Любая помощь/проницательность оценивается.

Спасибо за ваше время.

Answer 1

1. Контекстное меню

   Я использую этот d3-context-menu для показа на SVG элементов контекстного меню.

   Однако плагин не может использоваться непосредственно на d3.brush rects. Правильное событие mousedown также вызовет событие кисти. Я пробовал event.stopImmediatePropagation(), это сработало.

   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. Отключить изменение размера

   Кажется, что d3 не имеет никакого явного параметра для этой функции. Но вы можете удалить прямоугольники для изменения размера в группе кистей.

   // after call brush 
   brushG.selectAll(“.resize”).remove();