【 D3.js 入門系列 --- 10 】 地圖的繪制

    本人的個人部落格為：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