在悬停时连接美国 D3 JS 县地图中的边界线

Question

我有一张美国的 JavaScript D3 地图，我正在尝试在悬停时创建“阴影”效果，并带有均匀分布的边界线。我的代码（如下）确实有一些预期的效果，但边界没有完全显现。下面的截图是以悬停在一个县为例。

我的 js 文件看起来像：

# collect the map, set up nation and counties

d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json").then(
    function(us) {
        svg.append("path")
            .datum(topojson.feature(us, us.objects.nation))
            .attr("fill", "#f5f5f5")
            .attr("class", "nation")
            .attr("d", path)
        svg.selectAll("path.county")
            .data(topojson.feature(us, us.objects.counties).features)
            .join("path")
                .attr("id", function(d) {
                    return d["id"]
                })
            .attr("class", "county")
            .attr("fill", "#f5f5f5")
            .attr("stroke", "#ffffff")
            .attr("stroke-linejoin", "round")
            .attr("d", path)

# add in my data

        d3.csv("file.csv").then(
            function(data) {
               ...
               data.forEach(function(d) {
                    d3.select(`[id="${d['FIPS']}"]`)
                        .attr("fill", function() {
                            if (d["URL"] != "") {return getColor()}
                            else {return "#f5f5f5"}
                        })
                        .on("mouseover", function() {
                            d3.select(`[id="${d['FIPS']}"]`)
                                .style("stroke", "rgba(35, 31, 32, 0.1)")
                                .style("stroke-width", 2)
                        })
                        .on("mouseout", function() {
                            d3.select(`[id="${d['FIPS']}"]`)
                                .style("stroke", "#ffffff")
                                .style("stroke-width", 1)
                        })
            }
        )
    }
)

Answer 1

试试node.parentElement.appendChild(node);

经过进一步审查，SVG 1.1 不支持 z-index。

SVG 不使用 z-index，而是实现 painter’s algorithm 来查找所选元素后面的元素。这意味着无论在 dom 中跟随哪个元素，该元素都将位于其他元素之上（就像它们稍后绘制的一样）。这意味着将元素置于最前面所需要做的就是对 dom 中的元素重新排序，使其成为最后一个兄弟节点。所以你需要做的就是：

     d3.select(`[id="${d['FIPS']}"]`)
                ...
                this.parentElement.appendChild(this);
            }