【 D3.js 入门系列 --- 10 】 地图的绘制

    地图的制作在 D3 中可以说是最重要的一环。因为在进行数据可视化时，很多情况都会和地图联系在一起，如中国各省的人口多少，GDP多少等，都可以和地图联系在一起。

    D3 中制作地图所需要的文件问 JSON 文件。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于 JSON 的语法格式，可以在： 

    http://www.w3school.com.cn/json/ 

    学习。将 JSON 的格式应用于地理上的文件，叫做 GeoJSON 文件。本节就是用这种文件绘制地图。

    那么如何获得中国地图的 GeoJSON 文件呢，这其实真的有点麻烦，可以参照： https://github.com/clemsos/d3-china-map 进行制作，这不仅需要安装一些东西，还要研究一下制作方法，对想直接下载获取中国地图的 GeoJSON 文件的朋友可能感觉很不舒服，呵呵，其实我也是这样。

    好吧，我辛苦一点，将制作好的中国地图放上来与大家分享。

    中国地图的 GeoJSON 文件： china.json

    这个文件是用 Natural Earth 上的数据，经过提取后制作而成，我还去掉了很多无用的信息，只保留的中国的各省份的名字和 id 号，在这里先感谢 Natural Earth 提供的数据。接下来我还会提取其他各个国家的数据，放到个人博客中供大家分享，希望能省去大家的时间，因为这个部分真的很麻烦。对于只希望进行可视化的朋友来说，估计不想做这个工作。后续制作好的各种 GeoJSON 文件，都会放到 OUR D3.JS 小站中，请关注。

    好了，废话不说了。开始用 D3 来绘制地图吧。绘制分为三步：

    1. 设定投影函数

[javascript]  view plain  copy

1. var projection = d3.geo.mercator()  
2.                         .center([107, 31])  
3.                         .scale(850)  
4.                         .translate([width/2, height/2]);  

    由于 GeoJSON 文件中的地图数据，都是经度和纬度的信息，它们都是三维的。要在网页上显示的是二维的，所以要设定一个投影函数来转换经度纬度。如上所示，我们用 d3.geo.mercator() 的投影方式。关于各种投影方式的函数，可以参考：  https://github.com/mbostock/d3/wiki/Geo-Projections

    center() 函数是用于设定地图的中心位置，[107,31] 指的是经度和纬度。

    scale() 函数用于设定放大的比例。

    translate() 函数用于设定平移。

    2. 设定 path 函数

[javascript]  view plain  copy

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

    将上面的投影函数，作为参数，放入 path 中。这个 path 函数后面在绘制的时候就会用于转换经度纬度为平面信息，用于绘制。

    3. 读取文件并绘制

[javascript]  view plain  copy

1. d3.json("china.json", function(error, root) {  
2.           
3.         if (error)   
4.             return console.error(error);  
5.         console.log(root.features);  
6.           
7.         svg.selectAll("path")  
8.             .data( root.features )  
9.             .enter()  
10.             .append("path")  
11.             .attr("stroke","#000")  
12.             .attr("stroke-width",1)  
13.             .attr("fill", function(d,i){  
14.                 return color(i);  
15.             })  
16.             .attr("d", path )  
17.             .on("mouseover",function(d,i){  
18.                 d3.select(this)  
19.                     .attr("fill","yellow");  
20.             })  
21.             .on("mouseout",function(d,i){  
22.                 d3.select(this)  
23.                     .attr("fill",color(i));  
24.             });  
25.           
26.     });  

    和上几节一样，用 d3.json 读取文件。 请注意，再次声明一下，这个函数的调用需要你搭建一个服务器 。接下来，就是给 svg 中添加 path。要注意 attr("d",path) 这一行代码，前面也说过，这个其实相当于：

[javascript]  view plain  copy

1. .attr("d",funtion(d){  
2.     return path(d);  
3. })  

    请一定要注意这种省略用法。这里是有点难理解的。

    好了，看结果吧。

    我们的国家就被绘制出来了。要看完整代码和试试互操作的朋友，请点击下面链接查看，把鼠标放上去会有变色效果：

    http://www.ourd3js.com/demo/chinamap.html

转载自：    

个人博客为：www.ourd3js.com 

csdn博客为：blog.csdn.net/lzhlzz