D3.js mouseover событие должно достигнуть также внутренней области круга

Question

У меня есть следующий круг на моей странице.

container.append("circle") 
    .style("stroke", "red") 
    .style("stroke-width", 2) 
    .style("fill", "none") 
     .attr("cx", x) 
     .attr("cy", y) 
     .attr("r", 10); 

и следующие слушатели событий на нем.

svg.selectAll("circle")   
    .on("mouseover", function(d) { 
     console.log("mouse over"); 
    })     
    .on("mouseout", function(d) {  
     console.log("mouse out"); 
    }); 

мыши над событие срабатывает, когда указатель находится на красной линии окружности и мыши из событие срабатывает, когда он выходит из красной линии окружности.

Как я могу сделать прослушиватель событий, который запускается, когда указатель мыши проходит по красной линии круга и белой внутренней области? Не только красная линия. Теперь mouse out Событие запускается, когда указатель находится внутри красной линии (белая область внутри красного круга). Он должен срабатывать только тогда, когда указатель выходит за пределы круга.

Answer 1

Вместо заполнения none, используйте transparent.

var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width",500) 
 
    .attr("height",500); 
 

 
var circle = svg.append("circle") 
 
    .attr("r",50) 
 
    .attr("cx",60) 
 
    .attr("cy",60) 
 
    .style("fill","transparent") //Changed fill:none to fill:transaparent 
 
    .style("stroke","red") 
 
    .style("stroke-width","2"); 
 

 
circle.on("mouseover",function(){ 
 
    console.log("mouseover"); 
 
});  
 

 
circle.on("mouseout",function(){ 
 
    console.log("mouseout"); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

В дополнение к answer предложенной Gilsha вы можете придерживаться fill: none; и использовать свойство CSS pointer-events установить его в visible вместо этого.

видны
SVG только. Элемент может быть объектом события мыши, когда свойство видимости установлено на видимое, а курсор мыши находится над либо внутренним (то есть заполнением), либо периметром (то есть штрихом) элемента. Значения заполнения и хода не влияют на обработку события .

Следующий пример сделает ход круга синим до тех пор, пока указатель мыши парит над штрихом или внутренним заполнением.

d3.select("body") 
 
    .append("svg") 
 
     .attr({ 
 
      "width": 200, 
 
      "height": 200 
 
     }) 
 
    .append("circle") 
 
     .attr({ 
 
      "cx": 100, 
 
      "cy": 100, 
 
      "r": 50 
 
     }) 
 
     .style({ 
 
      "fill": "none", 
 
      "stroke": "red", 
 
      "stroke-width": "20", 
 
      "pointer-events": "visible" // <-- 
 
     }) 
 
     .on("mouseover", function(d) { 
 
      d3.select(this).style("stroke", "blue"); 
 
     })     
 
     .on("mouseout", function(d) {  
 
      d3.select(this).style("stroke", "red"); 
 
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>