D3.js美国县地图悬停时边界线无法完整显示问题求助

你遇到的悬停时边框无法完整显示，核心原因是SVG的渲染规则：SVG元素的层级由DOM节点的先后顺序决定，后绘制的县路径会覆盖在先绘制的路径上层。你给当前悬停的县添加的边框，会被相邻的、后绘制的县的白色边框遮挡，因此只能显示部分边框。

推荐两种实现方案，你可以按需选择：

方案1：调整DOM层级+边框修改（适配你现有代码逻辑） #

只需要在原有事件逻辑中新增raise()方法将当前悬停的县提到最高层级，同时把选择器替换为this提升效率：

// 把你原有的mouseover和mouseout替换为以下代码
.on("mouseover", function() {
    // 直接选中当前触发事件的元素，无需走ID选择器
    const current = d3.select(this)
    // 将当前元素移到所有同级县元素的最后，渲染层级变为最高
    current.raise()
        .style("stroke", "rgba(35, 31, 32, 0.1)")
        .style("stroke-width", 2)
})
.on("mouseout", function() {
    d3.select(this)
        .style("stroke", "#ffffff")
        .style("stroke-width", 1)
})

方案2：使用SVG阴影滤镜（效果更自然的均匀阴影） #

如果想要更贴合“阴影效果”的视觉表现，建议使用SVG内置滤镜实现，不会改变原有边框逻辑：

1. 先在初始化SVG时定义阴影滤镜

// 放在你初始化svg之后、加载地图数据之前的位置
const defs = svg.append("defs")
defs.append("filter")
    .attr("id", "hover-shadow")
    // 扩大滤镜作用范围，避免阴影被裁切
    .attr("x", "-15%")
    .attr("y", "-15%")
    .attr("width", "130%")
    .attr("height", "130%")
    .append("feDropShadow")
    .attr("stdDeviation", 2) // 阴影模糊度
    .attr("dx", 0) // 阴影水平偏移
    .attr("dy", 0) // 阴影垂直偏移
    .attr("flood-color", "rgba(35, 31, 32, 0.1)") // 阴影颜色

2. 修改悬停事件调用滤镜

.on("mouseover", function() {
    d3.select(this).raise().style("filter", "url(#hover-shadow)")
})
.on("mouseout", function() {
    d3.select(this).style("filter", null)
})

内容的提问来源于stack exchange，提问作者OJT