Question

在D3.js中，似乎在其他对象之前绘制的对象会使鼠标悬停监听器变得不可见。有解决方法吗？

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <script type="text/javascript" src="scripts/d3.v3.js"></script>
</head>
<body>
    <div id="viz"></div>
    <script type="text/javascript">

    d3.select("body").style("background-color", "black");

    var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 400)
        .attr("height", 200);

    sampleSVG.append("circle")
        .style("fill", "grey")
        .style("stroke-width", 2)
        .attr("r", 60)
        .attr("cx", 150)
        .attr("cy", 100)
        .on("mouseover", function(){d3.select(this).style("fill", "red");})
        .on("mouseout", function(){d3.select(this).style("fill", "grey");});

    sampleSVG.append("circle")
        .style("stroke", "yellow")
        .style("opacity", 0.5)
        .style("stroke-width", 2)
        .attr("r", 100)
        .attr("cx", 250)
        .attr("cy", 100)

    </script>
</body>
</html>

Answer 1

解决方法是添加“.style（”pointer-events“，”none“）;”对于最后一个圈子：

sampleSVG.append("circle")
    .style("stroke", "yellow")
    .style("opacity", 0.5)
    .style("stroke-width", 2)
    .attr("r", 100)
    .attr("cx", 250)
    .attr("cy", 100)
    .style("pointer-events", "none");

以下是一个工作示例http://tributary.io/inlet/5215694

注意：如果较大的圆圈的fill属性设置为“none”，则该示例也可以按预期工作，而不需要将“pointer-events”设置为none。

D3.js鼠标悬停无法触发重叠对象

1 个答案: