在可視化的開發中，中國地圖是很常用的一種圖表類型，這里我們簡要介紹一下，在這里制作完成一個帶插入位置點和提示框的交互式中國地圖。
需要準備的數據
- 中國地理位置信息 (geojson數據是從網上下載的)
- 位置點信息
{
"name": "地點",
"location":
[
{
"name":"北京",
"log":"116.3",
"lat":"39.9"
},
{
"name":"上海",
"log":"121.4",
"lat":"31.2"
},
{
"name":"深圳",
"log":"113",
"lat":"22"
}
]
}
核心概念
在正式的學習之前，我們先來了解幾個核心的概念。
地理路徑生成器，顧名思義，地理路徑生成器就是通過給定的地理數據轉換為矢量化的svg圖形的方法，這也是我們這一節制作地圖最核心的內容。
地理路徑生成器能夠通過geojson文件生成地理的路徑值，并將該路徑賦值給svg的path元素，即可繪制地圖，顯示在用戶界面。
還有一項概念是投影，投影的作用在于將球面多邊形轉為平面多邊形，關于投影的詳細知識，請猛戳這里
- 設置路徑投影方式
var projection = d3.geoMercator() //莫爾卡投影（世界地圖的投影方法）
.translate([width / 2, height / 2]) //以svg的中心區域為坐標原點
.center([105, 38]) //中心設置為經度105 緯度38的地方
.scale(550); //縮放因子
- 創建路徑并應用投影
var path = d3.geoPath().projection(projection)
- 相關計算
- path.area(feather) // 計算指定幾何體的投影面積
- path.centroid(feather) //計算制定幾何體的中心，單位是像素
- path.bounds(feather) //計算幾何體的邊界框，單位是像素
了解完這些之后，我們可以輕松的完成今天中國地圖的繪制。
定義畫布和地圖基本設置
定義畫布，并將中國地圖的中心偏移到畫布的中心點。
//創建svg
var width = 960, height = 500;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
//顏色比例尺
var colors = d3.scaleOrdinal(d3.schemeCategory20)
//創建投影(projection)
var projection = d3.geoMercator() //莫爾卡投影（世界地圖的投影方法）
.translate([width / 2, height / 2]) //以svg的中心區域為坐標原點
.center([105, 38]) //中心設置為經度105 緯度38的地方
.scale(550); //縮放因子
//創建path（地理路徑生成器）
var path = d3.geoPath().projection(projection);
使用d3.json請求數據繪制地圖
d3.json是d3內部封裝的ajax請求，便于我們請求遠程數據。
//解析地理位置json
let L_json = "https://raw.githubusercontent.com/waylau/svg-china-map/master/china-map/china.geo.json";
d3.json(L_json, function(json) {
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.attr('fill', function(d, i){return colors(i)})
.attr('stroke', 'rgba(255,255,255,1)')
.attr('stroke-width', 1)
})
效果如下
預覽
插入坐標點
通過給定的經緯度，利用path的計算方法，轉換為svg上對應的x,y坐標點，然后進行插入。
let P_json = "https://raw.githubusercontent.com/icodinglee/function-test/master/map.json";
d3.json(P_json, function(error, places) {
//插入分組元素
var location = svg.selectAll(".location")
.data(places.location)
.enter()
.append("g")
.attr("class","location")
.attr("transform",function(d){
//計算標注點的位置
var coor = projection([d.log, d.lat]);
return "translate("+ coor[0] + "," + coor[1] +")";
});
//插入一個圓
location.append("circle")
.attr("r",8)
.attr("fill", "#E91E63")
.attr("class","location")
.on("mouseover", function(d){
tooltip.html("當前城市：" + d.name)
.style("left", d3.event.pageX + 20+ "px")
.style("top", d3.event.pageY + 20 + "px")
.style("opacity", 1)
d3.select(this).transition()
.duration(150)
.attr("r", 12)
})
.on("mouseout", function(){
tooltip.style("opacity", 0)
d3.select(this).transition()
.duration(150)
.attr("r", 8)
})
});
添加提示框和標題
//添加提示框
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0)
//添加標題
var title = svg.append("text")
.attr("x", width/2)
.attr("y", 40)
.style("text-anchor", "middle")
.text("中國地圖")
效果如下
帶提示框的中國地圖
當然，我們還可以添加一些點擊框選等一系列自定義事件，在了解的地圖的每一步制作之后，添加這些事件當然也是易如反掌。
