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（）为true时，我仍然会让我的画笔“按常规”左键单击。

感谢任何帮助/见解。

感谢您的时间。

Answer 1

上下文菜单

我使用此d3-context-menu在svg元素上显示上下文菜单。

但是插件不能直接在d3.brush上使用。正确的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));
```
禁用调整大小

似乎d3没有该功能的明确选项。但是你可以删除画笔组中的调整大小。
```
// after call brush
brushG.selectAll(“.resize”).remove();
```

如何控制d3.brush（右键单击）

1 个答案: