Javascript 元素上的d3 mouseover与svg mousemove冲突

我已经将鼠标悬停事件附加到SVG元素中的一个元素（例如，一个圆圈）。我还需要一个与SVG元素/“background”本身关联的“mousemove”事件处理程序。但是，它们似乎有冲突：当鼠标移到圆圈上时，附加到圆圈的处理程序不会取代与SVG元素本身关联的处理程序

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

在这个JSFIDLE中可以看到一个简化的示例：（下面的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]);
    });

---

在您的例子中，实际上是行导致了问题，而不是SVG。也就是说，您将鼠标移动到正在绘制的直线上，因此会为圆触发

mouseout

事件

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]);
    });

---

您可以通过为行设置

指针事件

为

无

，使其对鼠标事件“透明”来防止这种情况。修改示例。

完美。非常感谢！