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