d3鼠标悬停在元素上与svg mousemove冲突

Question

我已将鼠标悬停事件附加到SVG元素中的元素(例如,圆圈).我还需要一个与SVG元素/"背景"本身相关联的"mousemove"事件处理程序.然而,它们似乎存在冲突:当鼠标悬停在圆圈上时,附加到圆圈的处理程序不会取代与SVG元素本身相关联的处理程序.

如何让圆圈的鼠标悬停取代SVG元素的事件处理程序？我需要它们两个,但只希望鼠标悬停在圆圈上触发,鼠标移动由SVG元素中任何其他位置的移动触发.

在这个JSFiddle中可以看到一个简单的例子:http://jsfiddle.net/aD8x2/(下面是JS代码).如果您单击一个圆圈(开始一条线),然后将鼠标悬停在另一个圆圈上,您将看到与鼠标悬停在圆圈上时触发的两个事件相关联的颜色闪烁.

var svg = d3.select("div#design")
            .append("svg")
            .attr("width", "500").attr("height", "500");

svg.selectAll("circle").data([100, 300]).enter().append("circle")
    .attr("cx", function(d) { return d; })
    .attr("cy", function(d) { return d; })
    .attr("r", 30)
    .on("mouseover", function () {
    d3.select(this).attr("fill", "red");
    })
    .on("mouseout", function() {
    d3.select(this).attr("fill", "black");
    })
    .on("click", function() {
    svg.append("line")
       .attr(
        {
        "x1": d3.select(this).attr("cx"),
        "y1": d3.select(this).attr("cy"),
        "x2": d3.select(this).attr("cx"),
        "y2": d3.select(this).attr("cy")
        })
       .style("stroke-width", "10")
       .style("stroke", "rgb(255,0,0)");
    });


    svg.on("mousemove", function() {
        var m = d3.mouse(this);

        svg.selectAll("line")
           .attr("x2", m[0])
           .attr("y2", m[1]);
    });

Answer 1

在您的情况下,它实际上是引起问题的行而不是SVG.也就是说,您将鼠标移动到正在绘制的线上,因此mouseout会为圆圈触发事件.

你可以通过设置防止这种情况pointer-events到none了线所以它的"透明"相对于鼠标事件.这里修改了例子.