d3.geo

在學習D3如何製作地圖前，我們需要了解下地圖的資料格式geoJSON，GeoJSON是一種對各種地理資料結構進行編碼的格式，基於Javascript物件表示法的地理空間資訊資料交換格式。

本節我們將製作一幅中國地圖，使用到的地圖資料檔案是從 Natural Earth 上的獲取，經過提取後製作而成的，在本節入門篇中不細述地圖資料的獲取過程，將直接使用已經做好的資料，可通過以下連結下載檢視中國地圖資料。

China GeoJSON

1、載入資料

d3.json(`geoChina.json`,function(error,data) {
…...
})

2、設定投影方式

    var width = 1000;
    var height = 800;
    var projection = d3.geo.mercator()
        .center([107, 31]) //center() 設定地圖的中心位置，[107,31] 指的是經度和緯度

        .scale(850) //scale() 設定放大的比例

        .translate([width/2, height/2]);

3、建立一個地理路徑生成器

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

3、繪製圖形

生成SVG容器

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

生成地圖路徑並新增互動事件

    var color = d3.scale.category20();
    svg.selectAll("path")
        .data( data.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));
                });

檢視線上演示