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 画地图终极自适应大小方案的更多相关文章

  1. Android自定义控件:自适应大小的文本控件

    需求 自适应大小的文本: 效果图: 项目开发中,开发人员根据UI人员提供的一套尺寸,布局了一些带文本的页面, 往往会少考虑一些数据极限的问题,造成机型屏幕适配问题. 例如: 文本(或数值)长度可变,如 ...

  2. 使用R画地图数据

    用R画地图数据 首先,从这里下载中国地图的GIS数据,这是一个压缩包,完全解压后包含三个文件(bou2_4p.dbf.bou2_4p.shp和bou2_4p.shx),将这三个文件解压到同一个目录下. ...

  3. Qt自适应大小显示图片,添加菜单

    由于后面的图像处理需要UI,OpenCV自带也不怎么会,MFC实在懒得学的.听同学说Qt不错,就用Qt做UI了. 本文主要介绍三个内容:在Qt Creator中使用OpenCV2.Qt中自适应显示图片 ...

  4. iOS HTML 字符串中的图片 自适应大小

    本文原文地址:http://www.cnblogs.com/qianLL/p/6095988.html 有时候 我们接收数据的时候  后台给的数据室一串HTML 的字符串  但是 我们要显示出来  这 ...

  5. Android项目实战(五):TextView自适应大小

    对于设置TextView的字体默认大小对于UI界面的好看程度是很重要的,小屏幕设置的文字过大或者大屏幕设置的文字过小都造成UI的不美观 现在就让我们学习自适应大小的TextView控件,即当文字长度变 ...

  6. css控制图片自适应大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决.      该CSS的功能是:大于600的图片自动调整为600显示. <style ...

  7. iOS:定制自适应大小的透明吐司弹框

    一.简单介绍 创建一个吐司消息的黑色透明弹框,可以根据消息长短自适应大小. 可以手动创建手动显示手动关闭,也可以手动创建自动显示自动关闭. 简单好用. 二.代码使用 .h文件 // // LiveHU ...

  8. 【QT】QPixmap在Label中自适应大小铺满

    KeepAspectRatio:设置pixmap缩放的尺寸保持宽高比. setScaledContents:设置label的属性scaledContents,这个属性的作用是允许(禁止)label缩放 ...

  9. Echarts 设置地图上文字大小及颜色

    Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...

随机推荐

  1. intelli idea中配置Tomcat找不到的解决办法

    这两天新入职一家公司,公司用的是intelli idea,以前用习惯了eclipse,感觉到有点不太习惯,当然,intelli idea也有自己的强大之处.在开始配置Tomact之前,按照网上的说法, ...

  2. python运算符优先级问题

    附上 对于or与and运算 其一, 在不加括号时候, and优先级大于or 其二, x or y 的值只可能是x或y. x为真就是x, x为假就是y 第三, x and y 的值只可能是x或y. x为 ...

  3. 【开源】接口管理平台eoLinker AMS 开源版3.1.5同步线上版!免费增加大量功能!

    概要:eoLinker是一个免费开源的针对开发人员需求而设计的接口管理工具,通过简单的操作来帮助开发者进行接口文档管理.接口自动化测试.团队协作.数据获取.安全防御监控等功能,降低企业的接口管理成本, ...

  4. Hibernate--使用xml配置映射关系

    写在前面: 配置实体类与数据库的映射关系,有两种方式: 1.使用*.hbm.xml  2.使用@注解 二:xml的配置方式: eg:员工的xml配置文件: <?xml version=" ...

  5. myeclipse无法导入项目

    MyEclipse无法导入Java项目时常遇到的两种情况: 1.Some projects cannot be imported because they already exist in the w ...

  6. Web服务器、应用服务器、Web容器、反向代理服务器区别与联系

    作者: 帅虫哥 出处:www.cnblogs.com/vipyoumay/p/7455431.html(点击尾部阅读原文前往) 我们知道,不同肤色的人外貌差别很大,而双胞胎的辨识很难.有意思的是Web ...

  7. 【python】字符串、列表、元组间相互转化及函数len、max、min、sum、sorted、reversed、enumerate、zip用法示例

  8. Slf4j与其他日志系统兼容的使用

    java生产的各种框架(如spring等)里各个框架会使用不同的日志体系,多个不同日志在一个jvm里混搭会出现一定问题 ,这里梳理一下java体系里常见的日志框架,以SFL4j为中心介绍下跟各个日志框 ...

  9. bzoj 4237: 稻草人

    Description JOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,JOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样,田地需要 ...

  10. bzoj 4013: [HNOI2015]实验比较

    Description 小D 被邀请到实验室,做一个跟图片质量评价相关的主观实验.实验用到的图片集一共有 N 张图片,编号为 1 到 N.实验分若干轮进行,在每轮实验中,小 D会被要求观看某两张随机选 ...