d3鼠标悬停在与svg鼠标移动的元素冲突

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来防止这种情况发生，因此对于鼠标事件它是“透明的”。修改示例here。