0

ユーザーが 2 つの 2D スライス (2 つのウィンドウ) を介して 3D 関数を探索できるようにするプログラムがあります。関数は、各次元に 1 つずつ、2 つのテーブルにエンコードされます。1 つのウィンドウに表示されているスライスを選択するには、ユーザーは「editDim」チェックボックスを有効にしてから、別のウィンドウでクリック アンド ドラッグします。「editDim」がチェックされていない場合、ユーザーは各ウィンドウをパンおよびズームできます。問題は、「editDim」モードでマウス カーソルをクリック アンド ドラッグすると、ピンク色の描画領域の外に移動すると、パン ズームが作動することです。 jsfiddle.net/eric_l/PB6aK/ .
マウス イベントを示すログ メッセージを追加しました。クリック アンド ドラッグ (通常のマウスの動き) をしていないときは、描画領域を囲む領域のイベントは表示されません。

this.zoom = d3.behavior.zoom().x(self.xscale).y(self.yscale).on("zoom", function() {self.redraw() } );

this.div = d3.select(this.anchor).append("div");
this.svg = this.div.append("svg")
    .datum(this.data[this.select].values)
    .attr("width", this.width + this.margin.left + this.margin.right)
    .attr("height", this.height + this.margin.top + this.margin.bottom)
    .append("g")
    .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")")
    .call(this.zoom)
    .on("mouseover", function () {
        console.log("on mouseover");
        self.div.style("background", "lightyellow");
    })
    .on("mouseout", function () {
        console.log("on mouseout");
        self.div.style("background", null);
    })
    .on("mousemove", function () {
        console.log("on mousemove");
        if (editDim)
        {
            d3.event.stopPropagation();
            self.update();
        }
    })
    .on("mousedown", function () {
        console.log("on mousedown");
        self.mousedown = true;
        if (editDim)
        {
            d3.event.stopPropagation();
            self.update();
        }
    })
    .on("mouseup", function () {
        console.log("on mouseup");
        self.mousedown = false;
    });

D3.behavior.zoom メソッドを使用しています。おそらく、「マウスで...」イベントが関連付けられている DOM 要素よりも大きい DOM 要素に関連付けられていますか? その場合、両方のイベント セットを画面の同じ範囲をカバーし、相互排他的に実行するにはどうすればよいですか (ここでも、「editDim」チェックボックスで選択します)。「on mouse...」イベントが関連付けられている DOM 要素を「svg」のすぐ上の「div」要素に変更すると、mousedown イベントが発生しなくなりました。

ありがとうございました。

4

1 に答える 1

0

ではなく、g要素にイベントを添付しました。svg

svg にアタッチするために、コードを次のように変更しました。

this.div = d3.select(this.anchor).append("div");
    var SVG = this.div.append("svg")
        .datum(this.data[this.select].values)
        .attr("width", this.width + this.margin.left + this.margin.right)
        .attr("height", this.height + this.margin.top + this.margin.bottom);
    this.svg=SVG
        .append("g")
        .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")")
        .call(this.zoom);
     SVG.on("mouseover", function () {//........

デモ

于 2013-02-07T01:51:30.767 に答える