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

Question

我有一张 U.S 的 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);
            }

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

Connecting border lines in D3 JS county map of US on hover

html

javascript

d3.js