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

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

2014-08-21 20:33:08 DecemberCafe 阅读数 27212 文章标签： D3地图中国JSON投影 更多

分类专栏： D3.js D3 数据可视化 - 入门系列

 

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/lzhlzz/article/details/38727993

    本人的个人博客为：www.ourd3js.com 

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

    转载请注明出处，谢谢。

---

    地图的制作在 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. 设定投影函数

 

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 函数

 

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

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

 

    3. 读取文件并绘制

 

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) 这一行代码，前面也说过，这个其实相当于：

 

 

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

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

 

    好了，看结果吧。

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

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