D3 Clippath Mouseover событие не работает

Question

wizard,

У меня возникли проблемы с событием mouseover на клипе. По какой-то причине это не срабатывает, и я думаю, что это связано с тем, что элементы обрезают изображение Чувака.

Моя цель - предупредить пользователя (1, 2 или 3 в примере - 4-й элемент в таблице «точек») наведенного элемента.

Я загрузил его в 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 на самом деле не являются «нарисованными» элементами, такими как rect, circle и т. Д. Поэтому вместо размещения слушателей событий в элементах окружности в клипате вы можете создать наложение тех же кругов для события mouseover , и сделать эти круги прозрачными.

Я создал отдельную функцию, чтобы сделать это:

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() после вызова перерисовывать();