當(dāng)前位置：
首頁 >
动画与互动
發(fā)布時(shí)間：2025/4/16
27
豆豆
地圖變形
我們通常將三維圖形轉(zhuǎn)換成二維圖形，不可避免的會造成一部分圖像失真。這取決于我們關(guān)注哪一部分了，可以盡可能保證主要部分不失真，次要部分失真就可以了。墨卡托投影圖法的原理大概就是如此。
如圖所示，格陵蘭島看起來和非洲幾乎一樣大就是失真的結(jié)果。我們保證赤道附近的數(shù)據(jù)不失真，越向兩級失真越明顯。
D3中的地圖
<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="http://d3js.org/d3.v3.min.js"></script><style></style><script type="text/javascript"> function draw(geo_data) { "use strict";var margin = 75,width = 1400 - margin,height = 600 - margin;var svg = d3.select("body").append("svg").attr("width", width + margin).attr("height", height + margin).append('g').attr('class', 'map');// 設(shè)置墨卡托投影法var projection = d3.geo.mercator()//設(shè)置放大縮小按鈕.scale(170)//把地圖中心拖動(dòng)至不同位置。這里把位置設(shè)置為頁面中已有//的SVG元素的一半.translate([width/2, height/2]);//創(chuàng)建SVG對象，來代表地圖的多邊形，將精度和緯度轉(zhuǎn)換為像素域//調(diào)用projection載入我們需要的映射var path = d3.geo.path().projection(projection);//選擇SVG所有路徑var map = svg.selectAll('path')//.features與國家坐標(biāo)的數(shù)組相對應(yīng).data(geo_data.features)// 選擇所有國家路徑.enter().attr('d',path)// 把整個(gè)地圖的填充顏色從黑色改為藍(lán)色.style('fill', 'rgb(9,157,217)')// 把地圖邊框改為深黑色線條.style('stroke', 'black').style('stroke-width', 0.5);function plot_points(data){//畫小圓點(diǎn)};var format = d3.time.format("%d-%m-%Y (%H:%M h)");//使用一個(gè)中間數(shù)據(jù)轉(zhuǎn)換函數(shù)，把我們的觀賽人數(shù)轉(zhuǎn)換成整數(shù)，把日期轉(zhuǎn)換成javastript對象d3.tsv("world_cup_geo.tsv", function(d) {d['attendance'] = +d['attendance'];d['date'] = format.parse(d['date']);return d;//放入我們已經(jīng)定義好的回調(diào)函數(shù)}, plot_points); };</script></head> <body><script type="text/javascript">/*Use D3 to load the GeoJSON file*/// 載入JSON文件，一旦所有數(shù)據(jù)載入成功，調(diào)用draw函數(shù) d3.json("world_countries.json", draw);</script> </body> </html> 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
- 上一篇： 叙事结构
- 下一篇： 1.2.1 Logistic回归和梯度下