Question

我有一个程序，允许用户通过两个2D切片（在两个窗口中）探索3D功能。该函数编码在两个表中，每个表对应一个维度。要选择一个窗口中显示的切片，用户启用“editDim”复选框，然后在另一个窗口中单击拖动。取消选中“editDim”时，用户可以平移和缩放每个窗口。问题是当处于'editDim'模式时，如果我单击并拖动鼠标光标移出粉红色阴影绘图区域，则缩放开始。我已将简化版本放入jsfiddle，{{3} }。
我添加了显示鼠标事件的日志消息，当没有单击拖动时（正常的鼠标移动），我看不到绘图区域周围区域的事件。

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事件。

谢谢。

Answer 1

您将活动附加到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 () {//........

demo

为什么“鼠标......”功能奇怪

1 个答案: