d3 画地图终极自适应大小方案
d3,v4以前用d3画地图的时候,为了让地图差不多正好画在容器的上下左右正中间,不得不慢慢的这样调:
const projection = d3.geoMercator()
.center([108.3340400357, 22.8212837740])
.scale(4900)
.translate([400, 330]);
center还好搞,搜一下经纬度就搞定
scale和translate要配合起来一起搞基,搞过的都知道,没搞过的就去试试
从V4版本开始,终极杀手锏来了:
const projection = d3.geoMercator().fitSize([width, height], geoJSON);
就是这样简单到叫你目瞪口呆,连经纬度也不要了。骚年,快去试试吧!!!
d3 画地图终极自适应大小方案的更多相关文章
- Android自定义控件:自适应大小的文本控件
需求 自适应大小的文本: 效果图: 项目开发中,开发人员根据UI人员提供的一套尺寸,布局了一些带文本的页面, 往往会少考虑一些数据极限的问题,造成机型屏幕适配问题. 例如: 文本(或数值)长度可变,如 ...
- 使用R画地图数据
用R画地图数据 首先,从这里下载中国地图的GIS数据,这是一个压缩包,完全解压后包含三个文件(bou2_4p.dbf.bou2_4p.shp和bou2_4p.shx),将这三个文件解压到同一个目录下. ...
- Qt自适应大小显示图片,添加菜单
由于后面的图像处理需要UI,OpenCV自带也不怎么会,MFC实在懒得学的.听同学说Qt不错,就用Qt做UI了. 本文主要介绍三个内容:在Qt Creator中使用OpenCV2.Qt中自适应显示图片 ...
- iOS HTML 字符串中的图片 自适应大小
本文原文地址:http://www.cnblogs.com/qianLL/p/6095988.html 有时候 我们接收数据的时候 后台给的数据室一串HTML 的字符串 但是 我们要显示出来 这 ...
- Android项目实战(五):TextView自适应大小
对于设置TextView的字体默认大小对于UI界面的好看程度是很重要的,小屏幕设置的文字过大或者大屏幕设置的文字过小都造成UI的不美观 现在就让我们学习自适应大小的TextView控件,即当文字长度变 ...
- css控制图片自适应大小
相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决. 该CSS的功能是:大于600的图片自动调整为600显示. <style ...
- iOS:定制自适应大小的透明吐司弹框
一.简单介绍 创建一个吐司消息的黑色透明弹框,可以根据消息长短自适应大小. 可以手动创建手动显示手动关闭,也可以手动创建自动显示自动关闭. 简单好用. 二.代码使用 .h文件 // // LiveHU ...
- 【QT】QPixmap在Label中自适应大小铺满
KeepAspectRatio:设置pixmap缩放的尺寸保持宽高比. setScaledContents:设置label的属性scaledContents,这个属性的作用是允许(禁止)label缩放 ...
- Echarts 设置地图上文字大小及颜色
Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...
随机推荐
- intellij idea 主题大全,看不惯idea 那2种主题的来这里了
一直用默认的主题,但是白色的背景看久了会晃眼睛.所以打算换成黑色的. 不过Intellij只有两种主题,Default和Darcula. 现在只能自己手动安装一个了.新主题需要满足, 看久了不会太累. ...
- Apache反向代理的配置
Apache反向代理的配置 一: Mac系统自带apache服务器 1. 查看apache版本命令如下: sudo apachectl -v 2. 启动apache sudo apachect ...
- Android项目实战(三十六):给背景加上阴影效果
圆角背景大家应该经常用: 一个drawable资源文件 里面控制corner圆角 和solid填充色 <shape xmlns:android="http://schemas.and ...
- Python学习日记day10------函数的命名空间、作用域与闭合函数
1,参数陷阱 如果默认参数的只是一个可变数据类型,那么每一次调用的时候,如果不传值就共用这个数据类型的资源. 2,三元运算 c=a if a>b else b#如果a>b返回a,否则,返回 ...
- [机器学习系列] k-近邻算法(K–nearest neighbors)
C++ with Machine Learning -K–nearest neighbors 我本想写C++与人工智能,但是转念一想,人工智能范围太大了,我根本介绍不完也没能力介绍完,所以还是取了他的 ...
- bzoj 2959: 长跑
Description 某校开展了同学们喜闻乐见的阳光长跑活动.为了能"为祖国健康工作五十年",同学们纷纷离开寝室,离开教室,离开实验室,到操场参加3000米长跑运动.一时间操场上 ...
- Chrome调试折腾记_(1)调试控制中心快捷键详解!!!
转载:http://blog.csdn.net/crper/article/details/48098625 大多浏览器的调试功能的启用快捷键都一致-按下F12;还是熟悉的味道; 或者直接 Ctrl ...
- js知识点记录
1.for...in:用于遍历数组或对象的属性. for(var prop in obj){console.log(obj[prop])}; 该循环遍历对于对象属性是无序的,可能是因为obj本来就是无 ...
- MySQL 的调节和优化的提示
MySQL 服务器硬件和操作系统调节: 1. 拥有足够的物理内存来把整个InnoDB文件加载到内存中——在内存中访问文件时的速度要比在硬盘中访问时快的多.2. 不惜一切代价避免使用Swap交换分区 – ...
- js构建函数优秀案例
这几个效果函数是看到别人写的,挺好的,复制下来学习备用! 函数封装: //var _hmt = _hmt || [];(function() {var hm = document.createElem ...