D3投影GPS坐标渲染为圆形，无法匹配geojson.io正确效果该如何解决

你遇到的现象确实是投影配置错误导致的，具体修复方案如下： #

核心原因 #

你的GeoJSON存储的是极小范围的地块坐标，默认D3投影没有针对该区域做中心点校准和缩放适配，导致整个多边形被压缩到像素级大小，视觉上呈现为圆形。 #

具体修复步骤 #

• 步骤1：选择墨卡托投影，将投影中心点设置为你地块的中心坐标（经纬度约为[172.417, -43.99]）
• 步骤2：拉高投影缩放值，该范围的地块需要将缩放值调整到1000000左右，可根据你的画布尺寸微调
• 步骤3：将配置好的投影绑定到geoPath生成器，再渲染GeoJSON路径
  如果不想手动计算中心点和缩放值，可以直接用fitExtent方法让投影自动适配你的画布尺寸，无需手动配置center和scale参数。

示例代码片段 #

// 初始化SVG画布
const svg = d3.select("svg")
    .attr("width", 800)
    .attr("height", 600);

// 配置适配当前地块的投影
const projection = d3.geoMercator()
    // 手动配置写法
    .center([172.417, -43.99]) // 设置为地块中心点
    .scale(1000000) // 高缩放适配小范围
    .translate([400, 300]); // 偏移到画布中心

// 自动适配写法（替换上面三行配置即可）
// projection.fitExtent([[0,0], [800,600]], yourGeoJson)

// 绑定投影到路径生成器
const pathGenerator = d3.geoPath().projection(projection);

// 渲染GeoJSON
svg.selectAll("path")
    .data(yourGeoJson.features)
    .enter()
    .append("path")
    .attr("d", pathGenerator)
    .attr("fill", "#ccc")
    .attr("stroke", "#000");

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