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>，每一個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 color(i);
        })
        .attr("d", path);
});

注意該過程是異步的。
數據解析後的繪製過程應該完全在解析之後，通常可以直接將代碼寫到then之後的函數之中。
color爲顏色比例尺，可以提前構造生成。

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