使用D3加载GeoJSON绘制SVG出现空白问题求助

常见问题排查与修复方案 #

1. 投影未适配数据范围 #

默认的d3.geoMercator()投影以(0,0)为中心，如果你的道路数据不在这个区域附近，会被渲染到SVG可视区域之外。
修复方法：用projection.fitSize()或projection.fitExtent()根据GeoJSON数据自动调整投影参数：

var svg = d3.select("#mainSvg")
            .attr("width", 800) // 先明确SVG宽高
            .attr("height", 600);
var projection = d3.geoMercator();
var path = d3.geoPath().projection(projection);

d3.json("static/geojson/roads.geojson").then(function(geojson) {
    // 让投影适配SVG容器和GeoJSON数据
    projection.fitSize([800, 600], geojson);
    svg.selectAll("path")
       .data(geojson.features)
       .enter()
       .append("path")
       .attr("d", path)
       .style("fill", "none")
       .style("stroke", "steelblue");
}).catch(err => {
    console.error(err)
});

2. 样式属性错误 #

道路数据通常是LineString或MultiLineString类型的线要素，这类元素用fill属性不会显示，必须设置stroke样式。
修复方法：将style("fill", "steelblue")替换为style("stroke", "steelblue")，同时设置fill: none避免意外填充。

3. SVG未设置宽高 #

如果你的<svg id="mainSvg">标签没有显式设置width和height，fitSize无法正确计算渲染范围，元素可能被渲染到不可见区域。
修复方法：在HTML中直接定义SVG尺寸：

<svg id="mainSvg" width="800" height="600"></svg>

或者在JS代码中动态设置。

4. 验证GeoJSON数据有效性 #

确认GeoJSON的features数组不为空，且每个要素的geometry.type符合预期（比如LineString）。可以在回调中打印数据排查：

d3.json("static/geojson/roads.geojson").then(function(geojson) {
    console.log(geojson.features); // 查看是否存在有效要素
    // ... 其他渲染代码
});

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