# 地理图
## 需求
绘制一张世界地图
## 分析
首先我们需要地图数据
目前d3支持[geojson](https://tools.ietf.org/html/rfc7946)格式化数据。d3的发起人[mbostock](https://github.com/mbostock)同时构建的了[topojson](https://github.com/topojson/topojson),可以将geojson减少80%以上的大小。可以将topojson转化为geojson。
绘制思路:
1. 我们需要将topojson转化为geojson,由于这是独立库不在d3中包含,所以需要单独引入。
2. 将topojson数据处理为geojson
3. 需要使用d3.geoPath()来绘制,d3提供多种投影,所以我们需要选用适合的投影方式。
4. 需要将数据绑定到path,调用geoPath进行绘制即可。
## 绘制
``` javascript
//创建svg
var svg = d3.select('#root')
.append('svg')
.attr('width', 1200)
.attr('height', 600)
.style("background-color","rgb(142, 137, 137)");
var margin=[100,100,100,100]
var color = d3.scaleOrdinal(d3.schemeCategory20)
var projection = d3.geoEquirectangular() //圆柱平面投影
var path = d3.geoPath(projection)
var Graticule = d3.geoGraticule()//创建经纬线
d3.json('./world.json',function(error,world){
if (error) throw error;
dataSet = topojson.mesh(world)
console.log(dataSet)
svg.insert("path", ".graticule")
.datum(dataSet)
.attr("d", path)
.attr('fill','none')
.attr('stroke','#000')
})
```
## 实例
[geo0](https://doter1995.github.io/d3-start-course/geo/geo-0.html)
![](https://box.kancloud.cn/6e4ee508abb6bb29e6ba93c65f49c27e_1008x514.png)
[地球仪](https://doter1995.github.io/d3/charts/geo/)使用geoOrthographic投影
![](https://box.kancloud.cn/de0193307b81c91f6afe102683316b3e_631x512.png)