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)); });

查看在线演示

相关资源：python入门教程(PDF版)