D3.js绘制中国地图填充溢出问题

问题描述：

在用d3.js绘制中国地图时，如果中国地图geoJSON数据取自
阿里云geoJSONhttps://datav.aliyun.com/tools/atlas/

注意数据版本图中数据版本v2


同时使用d3库对数据直接进行解析

const projection = d3.geoMercator()
		.scale(height * 0.9).center([107, 31])
		.translate([width / 2, height / 2]);
const path = d3.geoPath(projection);
const colors = d3.scaleOrdinal(d3.schemeBrBG[11]);

那么可能会得到以下情况

忽略下图配色

根据F12控制台检查，是部分省份绘制时颜色填充出现了问题。

---

原因分析：

原因在于，阿里（实际是高德地图）的数据有问题

这就得提到d3-geo的处理方式以及geoJSON数据的格式问题。简单来说，geoJSON数据以一定标准方式定义地图的边界点，d3-geo用路径将其链接起来。

如果数据提供的图形边界不闭合，那么在进行图形颜色填充时，必定会产生不想发生的颜色溢出问题

---

解决方案：

• 第一种：直接更换整体数据源，找到其他无路径问题的geoJSON
• 第二种：用浏览器开发者工具定位溢出省份，到json文件中找到对应省份，找到 coordinates 属性，记住第一个点x y 值，删除掉本省份最后多余的点直到与第一个点相同（路径闭合成环）。