d3.geo

在学习D3如何制作地图前，我们需要了解下地图的数据格式geoJSON，GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式。

本节我们将制作一幅中国地图，使用到的地图数据文件是从 Natural Earth 上的获取，经过提取后制作而成的，在本节入门篇中不细述地图数据的获取过程，将直接使用已经做好的数据，可通过以下链接下载查看中国地图数据。

China GeoJSON

1、加载数据

d3.json('geoChina.json',function(error,data) {
…...
})

2、设置投影方式

    var width = 1000;
    var height = 800;
    var projection = d3.geo.mercator()
        .center([107, 31]) //center() 设定地图的中心位置，[107,31] 指的是经度和纬度

        .scale(850) //scale() 设定放大的比例

        .translate([width/2, height/2]);

3、创建一个地理路径生成器

    var path = d3.geo.path()
        .projection(projection);

3、绘制图形

生成SVG容器

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

生成地图路径并添加交互事件

    var color = d3.scale.category20();
    svg.selectAll("path")
        .data( data.features )
        .enter()
        .append("path")
        .attr("stroke","#000")
        .attr("stroke-width",1)
        .attr("fill", function(d,i){
            return color(i);
        })
        .attr("d", path )   //使用地理路径生成器
        .on("mouseover",function(d,i){
                    d3.select(this)
                       .attr("fill","yellow");
                })
                .on("mouseout",function(d,i){
                    d3.select(this)
                       .attr("fill",color(i));
                });

查看在线演示