欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

动画与互动

发布时间：2025/4/16 41 豆豆
生活随笔 收集整理的这篇文章主要介绍了 动画与互动 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

地图变形

我们通常将三维图形转换成二维图形，不可避免的会造成一部分图像失真。这取决于我们关注哪一部分了，可以尽可能保证主要部分不失真，次要部分失真就可以了。墨卡托投影图法的原理大概就是如此。

如图所示，格陵兰岛看起来和非洲几乎一样大就是失真的结果。我们保证赤道附近的数据不失真，越向两级失真越明显。

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位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的动画与互动的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。