本章以中國(guó)地圖為例，介紹地圖的制作方法。

在數(shù)據(jù)可視化中，地圖是很重要的一部分。很多情況會(huì)與地圖有關(guān)聯(lián)，如中國(guó)各省的人口多少，GDP多少等，都可以和地圖聯(lián)系在一起。

地圖數(shù)據(jù)的獲取

制作地圖需要 JSON 文件。JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。關(guān)于 JSON 的語(yǔ)法格式，可以學(xué)習(xí)【JSON 淺談】系列。

將 JSON 的格式應(yīng)用于地理上的文件，叫做 GeoJSON 文件。本文就是用這種文件繪制地圖。

那么如何獲取中國(guó)地圖的 GeoJSON 文件呢，真的有點(diǎn)麻煩，可以參照：https://github.com/clemsos/d3-china-map進(jìn)行制作。這不僅需要安裝一些東西，還要研究一下制作方法，對(duì)想直接下載獲取中國(guó)地圖的 GeoJSON 文件的朋友可能感覺很不舒服，呵呵，其實(shí)我也是這樣。

好吧，我辛苦一點(diǎn)，將制作好的中國(guó)地圖放上來(lái)與大家分享。

中國(guó)地圖的 GeoJSON 文件： china.geojson

這個(gè)文件是用 Natural Earth 上的數(shù)據(jù)，經(jīng)過(guò)提取后制作而成，我還去掉了很多無(wú)用的信息，只保留的中國(guó)的各省份的名字和 id 號(hào)，在這里先感謝 Natural Earth 提供的數(shù)據(jù)。

本站還提供有其他國(guó)家、以及具體到中國(guó)縣級(jí)的地理文件，希望為大家節(jié)省寶貴的時(shí)間，這個(gè)部分還是很麻煩的。對(duì)于只希望進(jìn)行可視化的朋友來(lái)說(shuō)，估計(jì)不想做這個(gè)工作。目前已經(jīng)制作好的：

• 世界地圖和主要國(guó)家
• 中國(guó)省市級(jí)
• 中國(guó)縣級(jí)

好了，開始繪制地圖吧。

投影函數(shù)

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

由于 GeoJSON 文件中的地圖數(shù)據(jù)，都是經(jīng)度和緯度的信息。它們都是三維的，而要在網(wǎng)頁(yè)上顯示的是二維的，所以要設(shè)定一個(gè)投影函數(shù)來(lái)轉(zhuǎn)換經(jīng)度緯度。如上所示，使用 d3.geo.mercator() 的投影方式。各種投影的函數(shù)，可以參考： https://github.com/mbostock/d3/wiki/Geo-Projections

第 2 行：center() 設(shè)定地圖的中心位置，[107,31] 指的是經(jīng)度和緯度。

第 3 行：scale() 設(shè)定放大的比例。

第 4 行：translate() 設(shè)定平移。

地理路徑生成器

為了根據(jù)地圖的地理數(shù)據(jù)生成 SVG 中 path 元素的路徑值，需要用到 d3.geo.path()，我稱它為地理路徑生成器。

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

projection() 是設(shè)定生成器的投影函數(shù)，把上面定義的投影傳入即可。以后，當(dāng)使用此生成器計(jì)算路徑時(shí)，會(huì)自己加入投影的影響。

向服務(wù)器請(qǐng)求文件并繪制地圖

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() 不能直接讀取本地文件，因此你需要搭建一個(gè)服務(wù)器，例如 Apache。

接下來(lái)，就是給 svg 中添加 path 元素。本例中，每一個(gè) path 表示一個(gè)省。要注意 attr(“d”,path) 這一行代碼，它相當(dāng)于：

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

這種省略用法是很常用的，請(qǐng)務(wù)必掌握。

好了，看結(jié)果吧：

http://wiki.jikexueyuan.com/project/d3wiki/images/chinamap-1.png" alt="中國(guó)地圖" />

源代碼

下載地址：rm100.zip

展示地址：http://www.ourd3js.com/demo/rm/R-10.0/chinamap.html

注意，由于需要讀取地圖的數(shù)據(jù)文件，顯示可能會(huì)有延遲。