比例尺:就像函数一样,将一个量转换为另一个量,定义域到值域的转换。
每个比例尺都需要指定一个domain(定义域)和range(值域)。

定量比例尺:定义域是连续的。值域有连续的也有离散的。

1、线性比例尺(Linear Scale)

  • d3.scale.linear():创建一个线性比例尺。
  • linear(x):输入一个在定义域内的值x,返回值域内对应的值。
  • linear.invert(y) :输入值域,返回定义域
  • linear.domain([numbers]): 设定或获取定义域,最少放入两个数,也可以超过两个数,但domain和range的数量必须相等。
  • linear.range([values]):设定或获取值域,最少放入两个数,也可以超过两个数,但domain和range的数量必须相等。
  • linear.rangeRound([valuses]): 输出值会进行四舍五入的运算,结果是整数
  • linear.clamp([boolean]):默认被设置为false,当该比例尺接受一个超出定义域范围内的值时,依然能够按照同样的计算方法计算得到一个值,该值可能是超出值域范围的。设置为true时,任何超出值域范围的值,都会被收缩到值域范围内。
  • linear.nice([count]):将定义域的范围扩展成理想状态,例如对于[0.50000543,69.99997766]这样的定义域会自动将其变为[0,70].
  • linear.ticks([ticks]) :设定或获取定义域内具有代表性的值的数目。默认是10 ,主要用于选取坐标刻度
  • linear.ticksFormat(count,[format]): 设置定义域内具有代表的值的表示形式,如显示到小数点后两位,使用百分比的形式显示,主要用于坐标轴上。
var linear = d3.scale.linear().domain([0,20]).range([0,100]);
console.log( linear(10) );              //输出50
console.log( linear(30) );              //输出150
console.log( linear.invert(80) );              //输出16

linear.clamp(true);
console.log( linear(30) );              //输出100

linear.rangeRound([0,100]);
console.log( linear(13.33) );              //输出67,对结果进行了四舍五入//使用nice之后,定义域变成了比较工整的形式,但是并不是四舍五入
linear.domain([0.12300000,0.4888888888]).nice();
console.log( linear.domain() );              //输出[0.1,0.5]
linear.domain([33.611111,45.97745]).nice();
console.log( linear.domain() );              //输出[33,46]
var linear = d3.scale.linear().domain([-20,20]).range([0,100]);
var ticks = linear.ticks(5);
console.log(ticks);            //输出数组[-20,-10,0,10,20]var tickFormat = linear.tickFormat(5,"+");//设定的格式为"+":表示如果是正数,则在前面添加一个加号,负数则添加一个减号。
for(var i=0;i<ticks.length;i++){ticks[i] = tickFormat(ticks[i]);
}
console.log(ticks);            //输出["-20","-10","+0","+10","+20"]

2、指数(Power Scale)和对数比例尺(Log Scale)

指数比例尺和对数比例尺的方法和线性比例尺一样,但指数比例尺多一个exponent(),对数比例尺多一个base(),两者都是用于指定底数。

var pow = d3.scale.pow().exponent(3);     //设置指数比例尺的指数为3
console.log( pow(2) );        //输出为8
console.log( pow(3) );        //输出为27

pow.exponent(0.5);
console.log( pow(2) );        //输出为1.414
console.log( pow(3) );        //输出为1.732
//指定domain和range
//指数比例尺
var pow = d3.scale.pow().exponent(3).domain([0,3])          //指数比例尺内部调用了线性比例尺,而且把这个线性比例尺.range([0,90]);         //定义域的边界变为了其指定的次方。即定义域为[0,27]
//线性比例尺
var linear = d3.scale.linear().domain([0,Math.pow(3,3)]).range([0,90]);
console.log( pow(1.5) );        //输出为11.25
console.log( linear(Math.pow(1.5,3)) );    //输出为11.25

3、量子(Quantize Scale)和分位比例尺(Quantile Scale)

  • 量子比例尺

    定义域是连续的,值域是离散的。例如:定义域:[0,10],值域:["red","green","blue","yellow", "black"],使用量子比例尺之后,定义域被分割为5段,每一段对应值域的一个值,[0,2)对应red,[2,4)对应green,依此类推,所以量子比例尺很适合处理类似“数值对应颜色”的问题。

    var quantize = d3.scale.quantize().domain([50,0]).range(["#888","#666","#444","#222","#000"]);

  • 分位比例尺

    与量子比例尺类似,也是用于将连续的定义域区域分成段,每段对应到一个离散的值上,不同的是分段处的值量子比例尺的分段值只与定义域的起始值和结束值有关,其中间有多少其他数值都没有影响,分段值取其算数平均值,分位比例尺的分段值与定义域中存在的数值都有关,可使用quantile.quantiles()查询分位比例尺的分段值

    var quantize = d3.scale.quantize().domain([0,2,8,10]).range([1,100]),   //[0,5)对应1,[5,10]对应100quantile = d3.scale.quantile().domain([0,2,4,10]).range([1,100]);//[0,3)对应1,[3,10]对应100
    
    console.log( quantize(4.99) );//量子比例尺,输出1
    console.log( quantize(5) );//量子比例尺,输出100
    console.log( quantile(2.99) );//分位比例尺,输出1
    console.log( quantile(3) );//分位比例尺,输出100

4、阈值比例尺

阈值比例尺:通过设定阈值,将连续的定义域映射到离散的值域里,

//该阈值比例尺定义了三个阈值:10、20、30,则空间被划分为四段:负无穷到10,10到20,20到30,30到正无穷
var threshold = d3.scale.threshold().domain([10,20,30]).range(["red","green","blue","black"]);console.log( threshold(5) );                   //输出red
console.log( threshold(15) );                 //输出green
console.log( threshold(25) );                 //输出blue
console.log( threshold(35) );                 //输出black

console.log( threshold.invertExtent("red") );                   //输出[undefined,10]
console.log( threshold.invertExtent("green") );                 //输出[10,20]
console.log( threshold.invertExtent("blue") );                  //输出[20,30]
console.log( threshold.invertExtent("black") );                 //输出[30,undefined]

转载于:https://www.cnblogs.com/lmjZone/p/7739239.html

比例尺---定量比例尺相关推荐

  1. D3.js比例尺 定量比例尺 之 线性比例尺(v3版本)

    定量比例尺 : 数学上有函数的概念,不是编程中所说的函数,如线性函数.指数函数.对数函数等,而指的是一个量随着另一个量的变化而变化.例如有一下线性函数 : y=2x+1该函数在二维坐标系中绘制出来的图 ...

  2. java中比例尺_android 比例尺 源码(二) MyMapView.java

    public class MyMapView  extends MapView { static PopupOverlay pop = null;// 弹出泡泡图层,点击图标使用 private Vi ...

  3. 可视化工具–D3–比例尺的使用(ordinal)

    定量比例尺的使用(quantitative) http://blog.csdn.net/u014711869/article/details/72876245 序数比例尺的值域和定义域都是离散的,而不 ...

  4. ggspatial | ggplot2的地图制作拓展包(1):如何添加指北针和比例尺

    在前面的推文里,小编介绍了R语言的基础绘图系统和tmap工具包绘制地图的方法.ggplot2工具包作为现在最受欢迎的绘图包,其本身绘制地图的功能并不算强大.但是ggplot2有许多优秀的拓展包,它们共 ...

  5. Delphi ArcEngine 创建比例尺

    //本函数 是在 PageControl上拉选一个区域内 创建一个比例尺,比例尺的样式,我自己定义一个 枚举类型 如下 type      ScaleType = (stAlternating, st ...

  6. mongodb从3.2升级到4.4_人教版六年级下册数学微课视频及练习4.4.2 比例尺的应用...

    点击上方蓝字关注中小学同上一堂课,可每天获取免费课程! 课后作业 3.制造一种零件,在比例尺是8∶1的设计图上,零件的长度是5厘米,零件的实际长度是多少厘米? 4.某篮球场的长是26米,宽是14米,用 ...

  7. ArcGIS Server 自定义比例尺切图

    1.用ArcMap随意打开一份需要进行发布的.mxd地图文件,此处我以北京市为例,在Catalog面板中展开GIS Servers节点,此时可以看见ArcGIS Server的服务处于未连接状态,我们 ...

  8. DEM分辨率与比例尺

    介绍 比例尺大小和DEM分辨率常用对照情况如下: 比例尺类别 比例尺大小 等高距 DEM分辨率 对应数据 大比例尺 1:500 0.5m 亚米 航测/实测 大比例尺 1:1000 1m 亚米 航测/实 ...

  9. D3学习笔记之常用比例尺

    在学习了D3之后,本人对d3的比例尺这部分有一定的兴趣,决定将这一部分写下来,供网友参考或者自己后面的使用.由于这是本人第一次写博客,对格式啥的不是特别的了解,希望大家多多见谅. 比例尺的概念 大家都 ...

最新文章

  1. 2022-2028年中国钢筘行业市场研究及前瞻分析报告
  2. 简单删除我的电脑里的wps云文档图标
  3. codevs 1013 求先序排列
  4. 编程算法 - 切割排序 代码(C)
  5. 玩转linux 中间的yum 命令
  6. https防止注入_渗透入侵之PE注入如何应对
  7. linux 磁盘分区,格式化,挂载
  8. 阶段1 语言基础+高级_1-3-Java语言高级_09-基础加强_第2节 反射_11_反射_案例
  9. NB-SVM strong linear baseline
  10. axios.post发送小数据可以,但发送大数据出现Cross origin requests are only supported for protocol schemes: http, data,
  11. 数据分析实战项目2:优衣库销售数据分析
  12. 阿里巴巴实习一年之后的感悟
  13. 初中生也能看懂的狭义相对论(1.世界是什么?)(原子,质子和分子)(看不懂算我输)
  14. UIDatePicker得到的时间中怎么去掉时分秒(字符串操作知识拓展)--iOS开发
  15. 【Rust 日报】2023-1-19 Lars Bergstrom当选为Rust基金会董事会主席
  16. 红孩子创始人徐沛欣曾走家串户送奶粉
  17. nginx服务器 java项目,服务器使用Nginx如何部署Springboot项目
  18. 如何在本地搭建一个EasyPlayer的H5 demo 播放H265视频流?
  19. 比尔·盖茨一生总结:从恶魔到天使
  20. Public key for jenkins-2.288-1.1.noarch.rpm is not installed的解决方法

热门文章

  1. windows使用wget扒取整个网页代码
  2. nginx,apache,tomcat的区别
  3. error /node_modules/node-sass: Command failed
  4. 长沙学计算机知名沙大计教育,厉害了!梅沙未来学校获全国最佳STEM教育推进案例奖...
  5. sql优化-这个排版较好-转载
  6. win10如何加快开机速度【系统天地】
  7. 国内安卓和国外android,面对国内外这么多让人眼花缭乱的安卓手机,普通消费者你该怎么选?...
  8. eslint --fix found some errors. Please fix them and try committing again.
  9. 乡村振兴--地理信息--科学理论
  10. 初见ZBRUSH(三)