使用d3.geoMercator时地图出现黑边，无法实现国家颜色填充

这种填充时铺满屏幕、出现黑边的问题，本质是你的GeoJSON数据中存在跨越180°经线的多边形，墨卡托投影会把这类多边形渲染成“绕地球一圈”的闭合路径，填充时自然会覆盖整个画布，而轮廓因为是线条，只会显示正常的边界。

核心解决方案 #

1. 预处理GeoJSON数据，拆分跨经线多边形

使用D3的d3.geoSplit（D3 v7及以上版本支持），在加载GeoJSON后将跨180°经线的要素拆分为多个不跨线的多边形：

// 加载并处理GeoJSON数据时添加
import { geoSplit } from 'd3-geo';

// 示例：处理单个国家的GeoJSON
const processedGeoJson = geoSplit(originalGeoJson);

这个方法会自动把跨经线的多边形拆分成两个独立的多边形，避免投影时生成异常路径。

2. 给墨卡托投影添加裁剪范围

如果不想修改原始数据，可以给d3.geoMercator设置clipExtent，限制投影仅在画布可见范围内生成路径：

#computeProjections() {
    if (!this.cachedProjections) {
        // 替换为你的实际画布宽高
        const [width, height] = [this.canvasWidth, this.canvasHeight];
        
        const projection = d3.geoMercator()
            .scale(this.transform.k / (2 * Math.PI))
            .translate([this.transform.x, this.transform.y])
            // 添加裁剪范围，限制在画布内
            .clipExtent([[0, 0], [width, height]]);

        const path = d3.geoPath(projection);

        this.cachedProjections = { projection, path };
    }
    return this.cachedProjections;
}

这样超出画布的路径部分会被直接裁剪，不会生成绕地球的异常路径。

3. 验证GeoJSON的多边形缠绕顺序

GeoJSON要求多边形外环顶点按逆时针排列，内环（洞）按顺时针排列，如果顺序错误，D3会把多边形识别为“反方向”的巨大区域。可以用d3.geoArea验证并修正：

import { geoArea } from 'd3-geo';

// 修正单个多边形的缠绕顺序
function fixPolygonWinding(polygon) {
    if (geoArea({ type: 'Polygon', coordinates: [polygon] }) < 0) {
        return polygon.reverse();
    }
    return polygon;
}

// 批量处理GeoJSON的所有多边形
processedGeoJson.features.forEach(feature => {
    if (feature.geometry.type === 'Polygon') {
        feature.geometry.coordinates = feature.geometry.coordinates.map(fixPolygonWinding);
    } else if (feature.geometry.type === 'MultiPolygon') {
        feature.geometry.coordinates = feature.geometry.coordinates.map(polygons => 
            polygons.map(fixPolygonWinding)
        );
    }
});

针对你代码的修改建议 #

结合你的渲染逻辑，推荐先尝试添加clipExtent的方案，修改#computeProjections方法；如果问题仍存在，再对GeoJSON数据进行拆分或缠绕顺序修正。

另外，在填充颜色时，确保调用fill()的逻辑正确（你的代码已包含closePath()，这部分没问题），示例填充代码：

// 在stroke()后添加填充逻辑
country.graphics.beginPath();
path(geoJson);
country.graphics.closePath();
country.graphics.stroke();
// 添加自定义填充
country.graphics.beginFill(0x3498db); // 替换为目标颜色值
country.graphics.fill();
country.graphics.endFill();

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