求助：使用TopoJSON无法渲染D3.js的geoAlbersUsa投影地图，页面空白无报错

嘿，我一眼就瞅出你代码里的核心问题啦——你漏掉了D3数据绑定流程中最关键的enter().append()步骤！这就是为啥页面空白但控制台没报错的原因：你已经完成了数据加载和绑定，但根本没在页面上创建对应的<path>元素来渲染地图。

问题根源拆解 #

当你执行svg.selectAll(".states")时，页面上还没有任何带有.states类的元素，D3的data()方法拿到数据后，需要通过enter()方法识别出「需要创建新元素」的部分，再用append("path")生成实际的路径元素，之后才能设置路径属性和样式。

修正后的完整代码 #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>US States Map</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 projection = d3.geoAlbersUsa() 
    .translate([width / 2, height / 2]) 
    .scale(800); 

const path = d3.geoPath(projection); 

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)
        // 关键补充：创建对应的path元素
        .enter()
        .append("path") 
        .attr("class", "states") 
        .attr("d", path) 
        .style("fill", "none") 
        .style("stroke", "black") 
        .style("stroke-width", "2px") 
}); 
</script> 
</body> 
</html>

额外排查小贴士（如果还有问题的话） #

• 可以在then回调里加console.log(topojson.feature(data, data.objects.states))，确认生成的GeoJSON特征集结构是否正常
• 调整投影的scale值：如果地图显示过小或过大，试着把scale改成1000左右看看效果
• 你用的D3 v6和TopoJSON Client v3版本是兼容的，这部分不用操心

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