# 地理圖
## 需求
繪制一張世界地圖
## 分析
首先我們需要地圖數據
目前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://doter1995.github.io/d3/charts/geo/)使用geoOrthographic投影
