D3.js无法选中SVG元素：脚本执行无效，控制台运行正常

核心原因 #

你的代码执行时机过早——当脚本运行时，SVG中的国家路径元素还没被D3完全渲染到DOM中。手动在控制台执行时，页面已经完成所有渲染，元素自然存在；打开控制台时浏览器会有执行延迟，给了DOM足够的加载时间，所以能生效；关闭控制台时页面执行速度快，元素还没生成，代码就跑完了，因此只有低概率碰巧赶上元素加载完成的时机。

window.onload只等待页面静态资源加载完成，不包括D3异步加载并渲染地图数据的过程，所以没用。

解决方案 #

1. 把样式代码放在地图渲染的回调里 #

如果你的地图是通过异步请求（比如d3.json）加载的，必须将样式设置代码放在数据加载完成、地图元素渲染完成的回调函数内：

// 示例：加载地图数据并渲染
d3.json("your-map-data.json").then(function(mapData) {
    // 生成国家路径元素的代码
    const svg = d3.select("svg");
    svg.selectAll("path")
        .data(mapData.features)
        .enter()
        .append("path")
        .attr("id", d => `#${d.properties.countryCode}`) // 确保id和你用的key匹配
        .attr("d", d3.geoPath());

    // 在这里执行样式设置，此时所有路径元素已存在
    Object.keys(countries).forEach(key => {
        d3.select(key).style("fill", "red");
    });
});

2. 检查countries对象的初始化时机 #

确保countries对象在你执行循环前已经被正确赋值。如果countries也是异步加载的（比如从API或本地存储获取），需要等它加载完成后再执行样式代码：

// 假设countries是异步获取的
fetch("countries-data.json")
    .then(res => res.json())
    .then(countriesData => {
        // 赋值给全局countries变量
        window.countries = countriesData;
        // 再执行样式设置
        Object.keys(countriesData).forEach(key => {
            d3.select(key).style("fill", "red");
        });
    });

3. 用MutationObserver监听DOM变化 #

如果无法确定地图渲染的具体时机，可以用DOM监听工具，等目标元素出现后再执行代码：

// 监听SVG元素的子节点变化
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.addedNodes.length) {
            // 检查所有需要设置样式的元素是否都已存在
            const allElementsReady = Object.keys(countries).every(key => {
                return d3.select(key).node() !== null;
            });
            if (allElementsReady) {
                // 执行样式设置
                Object.keys(countries).forEach(key => {
                    d3.select(key).style("fill", "red");
                });
                observer.disconnect(); // 完成后停止监听，避免重复执行
            }
        }
    });
});

// 启动监听，目标是你的SVG容器
observer.observe(document.querySelector("#your-svg-container"), {
    childList: true,
    subtree: true
});

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