3

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 になるたびに、ブラシは「通常の」左クリックとして機能します。

ヘルプ/洞察をいただければ幸いです。

お時間をいただきありがとうございます。

4

1 に答える 1

1

  1. コンテキストメニュー

    このd3-context-menuを使用して、svg 要素のコンテキスト メニューを表示しています。

    ただし、プラグインを d3.brush rects で直接使用することはできません。右マウスダウン イベントもブラシ イベントをトリガーします。試してみ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();
于 2015-06-15T12:29:56.673 に答える