首页 > 代码库 > 【 D3.js 入门系列 --- 10 】 地图的绘制

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

2024-07-18 20:12:05   231人阅读

    本人的个人博客为：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. 设定投影函数

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

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

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

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

    2. 设定 path 函数

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

    3. 读取文件并绘制

d3.json("china.json", function(error, root) {
		
		if (error) 
			return console.error(error);
		console.log(root.features);
		
		svg.selectAll("path")
			.data( root.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));
            });
		
	});
    和上几节一样，用 d3.json 读取文件。请注意，再次声明一下，这个函数的调用需要你搭建一个服务器。接下来，就是给 svg 中添加 path。要注意 attr("d",path) 这一行代码，前面也说过，这个其实相当于：

.attr("d",funtion(d){
	return path(d);
})
    请一定要注意这种省略用法。这里是有点难理解的。

    好了，看结果吧。



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

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


联系
我们