一. 目前中国地图的地理文件格式有两种，GeoJSON和TopoJSON。

GeoJSON

GeoJSON 是用于描述地理空间信息的数据格式。GeoJSON 不是一种新的格式，其语法规范是符合 JSON 格式的，只不过对其名称进行了规范，专门用于表示地理信息。
GeoJSON 的最外层是一个单独的对象（object）。这个对象可表示：

几何体（Geometry）

特征（Feature）

特征集合（FeatureCollection）
最外层的 GeoJSON 里可能包含有很多子对象，每一个 GeoJSON 对象都有一个 type 属性，表示对象的类型，type 的值必须是下面之一。

Point：点。

MultiPoint：多点。

LineString：线。

MultiLineString：多线。

Polygon：面。

MultiPolygon：多面。

GeometryCollection：几何体集合。

Feature：特征。

FeatureCollection：特征集合。
如下面代码

点对象：
{
"type": "Point",
"coordinates": [ -135, 39 ]
}

线对象：
{
"type": "LineString",
"coordinates": [[-135, 39 ], [-137, 38 ]]
}

面对象：
{
"type": "Polygon",
"coordinates":[[ [30, 0], [31, 0], [31, 5], [30, 5], [30, 0] ]]
}

由以上格式可以发现，每一个对象都有一个成员变量 coordinates。如果 type 的值为 Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon 之一，则该对象必须有变量 coordinates。
如果 type 的值为 GeometryCollection（几何体集合），那么该对象必须有变量 geometries，其值是一个数组，数组的每一项都是一个 GeoJSON 的几何对象。例如：

{
    "type": "GeometryCollection",
    "geometries": [
        {
            "type": "Point",
            "coordinates": [100, 40]
        },
        {
            "type": "LineString",
            "coordinates": [ [100, 30], [100, 35] ]
        }
    ]
}

如果 type 的值为 Feature（特征），那么此特征对象必须包含有变量 geometry，表示几何体，geometry 的值必须是几何体对象。此特征对象还包含有一个 properties，表示特性，properties 的值可以是任意 JSON 对象或 null。例如：

{
    "type": "Feature",
    "properties": {
        "name": "北京"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [ 116.3671875, 39.977120098439634]
    }
}

如果 type 的值为 FeatureCollection（特征集合），则该对象必须有一个名称为 features 的成员。features 的值是一个数组，数组的每一项都是一个特征对象。

TopoJSON

TopoJSON 是 GeoJSON 按拓扑学编码后的扩展形式，是由 D3 的作者 Mike Bostock 制定的。相比 GeoJSON 直接使用 Polygon、Point 之类的几何体来表示图形的方法，TopoJSON 中的每一个几何体都是通过将共享边（被称为arcs）整合后组成的。
TopoJSON 消除了冗余，文件大小缩小了 80%，因为：

边界线只记录一次（例如广西和广东的交界线只记录一次）。

地理坐标使用整数，不使用浮点数。
引用来自ourd3js.com

二. 准备D3JS，构建最简单的中国地图

上面已经说过了，地理的JSON文件分为TopoJSON 和GeoJSON, 现在我们使用TopoJSON来完成接下来的构建。

在项目中引入两个lib

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>

生成投影和投影相对于的路径生成器

#生成路径生成器
generatePath(scale) {
      let self = this;
      var projection = self.generateProjection(scale);
     return d3.geoPath().projection(projection);
},
#生成投影
generateProjection(scale) {
    var svg = d3.select("svg"),
    width = svg.attr("width"),
    height = svg.attr("height");
    return d3.geoMercator()
          .center([105, 31])
          .scale(scale)
          .translate([width / 2, height / 2 + height / 6])
},

获取中国地图数据

initChinaMap() {
        let self = this;
        var path = self.generatePath(950);
        var pathCubier = self.generatePath(958);
        var color = function(i) {
          return d3.color('#02005A');
        };
        var svg = d3.select("svg");
        d3.json("/static/js/china-topo.json", function(error, root) {
          if (error)
            return console.error(error);
          //画阴影背景
          svg.append("g")
            .attr("filter", "url(#f1)")
            .attr("fill", "rgba(45,107,253,1)")
            .attr('style', 'border: 1px solid #fff;')
            .selectAll("path")
            .data(topojson.feature(root, root.objects.china).features)
            .enter()
            .append("path")
            .attr("stroke", "rgba(45,107,253,1)")
            .attr("stroke-width", 1)
            .attr("fill", "rgba(45,107,253,1)")
            .attr("d", pathCubier)
            .select('circle')
            .data(topojson.feature(root, root.objects.china).features)
            .enter()
            .append("circle")
            .attr('cx', '0')
            .attr('cy', '0')
            .attr('r', 500)
            .attr('fill', 'transparent')
          //画立体层级感
          svg.append("g")
            .attr("fill", "#59acc8")
            .selectAll("path")
            .data(topojson.feature(root, root.objects.china).features)
            .enter()
            .append("path")
            .attr("stroke", "#59acc8")
            .attr("stroke-width", 1)
            .attr("fill", "#59acc8")
            .attr("d", pathCubier)
          //画中国地图
          svg.append("g")
            .attr("fill", "#02005A")
            .selectAll("path")
            .data(topojson.feature(root, root.objects.china).features)
            .enter()
            .append("path")
            .attr("stroke", "#1C98C8")
            .attr("stroke-width", 1)
            .attr("fill", function(d, i) {
              return color(i);
            })
            .attr("d", path)
            .append("title")
            .text(function(d) {
              // console.log("d", d)
              return d.properties.name;
            })  
        });
      },

这里为了画出地图的立体效果和阴影效果，将整个地图分成了三部分，，先画阴影部分