D3 - 绘制中国地图 (D3.v5)

分享json数据来源：http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
D3基于D3.v5实现。
效果图：

首先，定义地图的投影和地理路径生成器。

let projection = d3.geoMercator()
    .center([107, 31])
    .scale(h * 0.9)
    .translate([w / 2, h / 2]);

let path = d3.geoPath()
    .projection(projection);

Mercator为一种常用的投影方法墨卡托投影。center设定地图的中心位置，经度与纬度。scale和translate分别设置所放量和平移量。geoPath中应用次投影函数，才产生路径值。
利用d3.json请求geojson文件，添加足够数量的，每一个path用于绘制每个省的路径。

d3.json("ChinaMap.json").then(function (geo) {
    console.log(geo);
    let Province = SvgMap.selectAll("path")
        .data(geo.features)
        .enter()
        .append("path")
        .attr("class", "province").style("fill", function (d, i) {
            return 'rgba(0,' + parseFloat(255 - Math.random() * 50) + ',' + parseFloat(255 - Math.random() * 100) + ')';
        })
        .attr("d", path);
});

注意该过程是异步的。
数据解析后的绘制过程应该完全在解析之后，通常可以直接将代码写到then之后的函数之中。
color为颜色比例尺，可以提前构造生成，也可随机数驱动或数据驱动。

let color = d3.scaleOrdinal(d3.schemeCategory10);