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。