d3.js - 如何控制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() 为 true 时，我的画笔仍然“像常规”左键单击。

感谢任何帮助/见解。

感谢您的宝贵时间。

Answer 1

1. 上下文菜单

   我正在使用这个 d3-context-menu用于在 svg 元素上显示上下文菜单。

   但是该插件不能直接用于d3.brush rects。右键 mousedown 事件也会触发 brush 事件。我尝试了 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();