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（）重绘（）;