D3.js鼠标悬停事件也应该到达圆圈的内部区域

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");
    });

鼠标悬停事件在指针位于红色圆圈线时触发，鼠标输出事件在超出红色圆圈线时触发。

如何在鼠标指针经过红色圆圈线及其白色内部区域时触发事件监听器？不只是红线。现在，当指针位于红线内（红色圆圈内的白色区域）时，会触发鼠标移出事件。它应该仅在指针移出圆圈时触发。

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

除了Gilsha提出的answer之外，您可能会坚持使用fill: none;并使用CSS属性pointer-events将其设置为visible。

  

<强>可见
  仅限SVG。该元素可以是鼠标事件的目标   visibility属性设置为visible，鼠标光标结束   无论是内部（即填充）还是周边（即中风）   元素。填充和描边的值不会影响事件   处理

以下示例将使用鼠标指针悬停在笔触或内部填充上时将圆圈的笔划呈现为蓝色。

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>