d3 画地图终极自适应大小方案

时间:2022-12-27 09:30:04

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. IP地址,子网掩码,默认网关,DNS服务器详解

    为了更深入的学习TCP/IP协议,最近看了不少有关资料,收集整理记录如下,以备后面的使用和方便各位学习: IP地址,子网掩码,默认网关,DNS服务器是什么意思? (一)  问题解析 001.   问: ...

  2. Linux Discuz论坛的安装

    1:建一个文件夹保存Discuz3.2

  3. Quartz2D 备忘 &plus; 学习

    Quartz2D Quartz2D是支持iOS和Mac系统的二维绘制引擎,它可以绘制: 绘制图形(图形,线条,圆等) 绘制文字 绘制/生成图片 读取/生成PDF 截图 Quartz2D主要功能就是以画 ...

  4. angular&period;js学习

    1.第一个小例子 <!DOCTYPE html> <html> <body> <div ng-app=""> <p>在输 ...

  5. &lbrack;转&rsqb;Jmeter(一)-精简测试脚本

    通过jmeter代理录制脚本后,会产生大量的无用的请求,尽管在代理中已经过滤了一部分图片或者CSS.JS文件. 手动查看主要的请求:这里主要关注登陆请求,要确定有效的URL请求 删除除/Login.a ...

  6. Intellij IDEA 使用小结

    快捷键 核心快捷键 IntelliJ IDEA 作为一个以快捷键为中心的 IDE,为大多数操作建议了键盘快捷键.在这个主题中,您可以找到最不可缺少的列表,使 IntelliJ IDEA 轻松实现第一步 ...

  7. Python下划线的详解

    本文将讨论Python中下划线(_)字符的使用方法.我们将会看到,正如Python中的很多事情,下划线的不同用法大多数(并非所有)只是常用惯例而已. 单下划线(_) 通常情况下,会在以下3种场景中使用 ...

  8. Linux 下统计Apache每分钟的并发数

    脚本非常简单,不清楚原理,逐行运行即可. 使用时将脚本复制到home目录,并添加执行权限.定时任务即可. 代码内容如下: #!/bin/sh date >> /home/date-time ...

  9. &dollar;digest already in progress 解决办法——续

    什么时候手动调用$apply()方法? 如果AngularJS总是将我们的代码wrap到一个function中并传入$apply(),以此来开始一轮$digest循环,那么什么时候才需要我们手动地调用 ...

  10. Unity ScriptableObject自定义属性显示

    1. 继承Editor,重写OnInspectorGUI方法 Editor官方文档 需求 将TestClass中intData属性和stringData按指定格式显示. 实现 定义一个测试类TestC ...