D3.js v5.0 地图

先说一下D3有很多的地图投影方法，但是很遗憾的是没有拿到比较细化的世界地图的json数据，所以以常见的投影方式做了一个例子。
安利一下获取中国地图的json数据：http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

附上世界地图的json数据：
https://download.csdn.net/download/m0_37777005/11219133
要积分的，别骂我，因为穷。。。

老样子，先看截图。

先看中国地图的实现。

import * as d3 from 'd3';

export default function mapEasy(id, data) {
   
  const width = 800;
  const height = 800;
  // 画布
  const svg = d3
    .select(id)
    .append('svg')
    .attr('width', width)
    .attr('height', height);

//敲黑板：投影方式。
  const projection = d3
    .geoMercator()
    .center([107, 31])
    .scale(600)
    .translate([width / 2, height / 2]);

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

  const color = d3.schemeCategory10;

  svg
    .selectAll('g')
    .data(data.features)
    .enter()
    .append