D3 Clippath鼠標懸停事件不起作用

Question

嚮導

我在clippath上遇到了一些mouseover事件。出於某種原因，它不會觸發和我認爲這是由於該元素剪裁的哥們的圖像。

我的目標是，以提醒用戶ID（圖1，在實施例2或3 - 以「點」表中的第四元素）的懸停的元件。

我裝成一個的jsfiddle：

https://jsfiddle.net/vk1jc8ah/4/

有人能使其發揮作用 - 或建議實現同一個目標的另一種方式？

HTML：

<div class="projectbounds" style="width:400px; height:300px; background-color:#000000;"></div> 

JS：

var size = 30, 
    w = 400, 
    h = 300, 
    dots = []; 

dots.push([101, 200, 0, 1, 1]); 
dots.push([170, 120, 0, 2, 1]); 
dots.push([210, 150, 0, 3, 1]); 

var svg = d3.select(".projectbounds") 
    .append("svg:svg") 
    .attr("id", "robsvg") 
    .attr("width", w) 
    .attr("height", h) 
    .style("cursor", "pointer"); 

var defs = svg.append("svg:defs"); 

var imgbg = svg.append('svg:image') 
    .attr('xlink:href', 'http://www.empireonline.com/images/features/100greatestcharacters/photos/7.jpg') 
    .attr('x', 0) 
    .attr('y', 0) 
    .attr('width', w) 
    .attr('height', h) 
    .attr('clip-path', 'url(#robclip)'); 

var robs = defs.append("svg:clipPath").attr("id", "robclip"); 

function redraw() { 
    for (var d in dots) { 
     robs.append("circle") 
      .attr("class", function() { 
       return "userid" + dots[d][4] + " bgtier" + dots[d][3]; 
      }) 
      .attr("cx", function() { 
       return dots[d][0]; 
      }) 
      .attr("cy", function() { 
       return dots[d][1]; 
      }) 
      .attr("r", size + 1) 
      .attr("onmouseover", function() { ////// not triggering... 
       return "alertid()"; ////// not triggering... 
      }); 
    } 
} 

function alertid(){ 
    alert("hi"); 
} 

redraw(); 

我裝成一個的jsfiddle：

https://jsfiddle.net/vk1jc8ah/4/

能

人幫幫我？

Answer 1

Clipaths實際上並沒有「繪製」元素，如矩形，圓形，等...所以不是把你的事件偵聽器的clipath內圓的元素，你可以爲鼠標懸停事件創建相同的圓的疊加，並使這些圓圈透明。

我創建了一個單獨的函數來做到這一點：

function drawEventCircles() { 
    for (var d in dots) { 
     svg.append("circle") 
      .attr("cx", function() { 
       return dots[d][0]; 
      }) 
      .attr("cy", function() { 
       return dots[d][1]; 
      }) 
      .attr("r", size + 1) 
      .attr("fill", "transparent") 
      .on("mouseover", function() {    
       alertid(); 
      } 
     ); 
    } 
} 

然後，只需您的通話後稱drawEventCircles（）重繪（）;