为什么鼠标悬停事件不适用于 d3.js 投影中的所有状态？

如何解决为什么鼠标悬停事件不适用于 d3.js 投影中的所有状态？

我很难理解为什么鼠标悬停事件在我的投影中不一致。我希望在鼠标悬停时突出显示一个状态，该状态在大多数情况下都有效，但对于某些状态，鼠标悬停事件根本不会发生。谁能帮我理解这里的问题是什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title></title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script src="https://unpkg.com/topojson-client@3"></script>
</head>
<body>
    <script>
        const width = 1000;
        const height = 600;

        const path = d3.geoPath(null);

        const svg = d3.select("body")
            .append("svg")
            .attr("height",height)
            .attr("width",width)
            .style("display","block")
            .style("margin","auto");

        d3.json("https://d3js.org/us-10m.v1.json").then(data => {
            svg.selectAll(".states")
                .data(topojson.feature(data,data.objects.states).features)
                .join("path")
                .attr("d",path)
                .style("fill","none")
                .attr("class","states")
                .style("stroke","black")
                .style("stroke-width","2px")
                .style("cursor","pointer")
                .on("mouSEOver",function(d,i) {
                    d3.select(this)
                        .transition(100)
                        .style("fill","#6d7899");
                })
                .on("mouSEOut","none");
                });
        });
    </script>
</body>
</html>

解决方法

我能够确定问题的根源。您必须将“fill”属性设置为实际值，而不是“none”，以便鼠标悬停事件正确识别投影中的地理边界。