D3比例尺
D3中有个重要的概念就是比例尺。比例尺就是把一组输入域映射到输出域的函数。映射就是两个数据集之间元素相互对应的关系。比如输入是1,输出是100,输入是5,输出是10000,那么这其中的映射关系就是你所定义的比例尺。
D3中有各种比例尺函数,有连续性的,有非连续性的,本文对于常用比例尺进行一一介绍。
1. d3.scaleLinear() 线性比例尺
使用d3.scaleLinear()
创造一个线性比例尺,而domain()
是输入域,range()
是输出域,相当于将domain
中的数据集映射到range
的数据集中。
let scale = d3.scaleLinear().domain([1,5]).range([0,100])
映射关系:
接下来,我们来研究这个比例尺的输入和输出。
scale(1) // 输出:0
scale(4) // 输出:75
scale(5) // 输出:100
刚才的输入都是使用了domain
区域里的数据,那么使用区域外的数据会得出什么结果呢?
scale(-1) // 输出:-50
scale(10) // 输出:225
所以这只是定义了一个映射规则,映射的输入值并不局限于domain()
中的输入域。
2. d3.scaleBand() 序数比例尺
d3.scaleBand()
并不是一个连续性的比例尺,domain()
中使用一个数组,不过range()
需要是一个连续域。
let scale = d3.scaleBand().domain([1,2,3,4]).range([0,100])
映射关系:
看一下输入与输出:
scale(1) // 输出:0
scale(2) // 输出:25
scale(4) // 输出:75
当输入不是domain()
中的数据集时:
scale(0) // 输出:undefined
scale(10) // 输出:undefined
由此可见,d3.scaleBand()
只针对domain()
中的数据集映射相应的值。
3. d3.scaleOrdinal() 序数比例尺
d3.scaleOrdinal()
的输入域和输出域都使用离散的数据。
let scale = d3.scaleOrdinal().domain(['jack', 'rose', 'john']).range([10, 20, 30])
映射关系:
输入与输出:
scale('jack') // 输出:10
scale('rose') // 输出:20
scale('john') // 输出:30
当输入不是domain()
中的数据集时:
scale('tom') // 输出:10
scale('trump') // 输出:20
输入不相关的数据依然可以输出值。所以在使用时,要注意输入数据的正确性。
我们从上面的映射关系中可以看出,domain()
和range()
的数据是一一对应的,如果两边的值不一样呢?下面两张图说明这个问题:
domain()
的值按照顺序循环依次对应range()
的值。
4. d3.scaleQuantize() 量化比例尺
d3.scaleQuantize()
也属于连续性比例尺。定义域是连续的,而输出域是离散的。
let scale = d3.scaleQuantize().domain([0, 10]).range(['small', 'medium', 'long'])
映射关系:
输入与输出:
scale(1) // 输出:small
scale(5.5) // 输出:medium
scale(8) // 输出:long
而对于domain()
域外的情况:
scale(-10) // 输出:small
scale(10) // 输出:long
大概就是对于domain()
域的两侧的延展。
5. d3.scaleTime() 时间比例尺
d3.scaleTime()
类似于d3.scaleLinear()
线性比例尺,只不过输入域变成了一个时间轴。
let scale = d3.scaleTime()
.domain([new Date(2017, 0, 1, 0), new Date(2017, 0, 1, 2)])
.range([0,100])
输入与输出:
scale(new Date(2017, 0, 1, 0)) // 输出:0
scale(new Date(2017, 0, 1, 1)) // 输出:50
时间比例尺较多用在根据时间顺序变化的数据上。另外有一个d3.scaleUtc()
是依据世界标准时间(UTC)来计算的。
6. 颜色比例尺
D3提供了一些颜色比例尺,10就是10种颜色,20就是20种:
d3.schemeCategory10
d3.schemeCategory20
d3.schemeCategory20b
d3.schemeCategory20c
// 定义一个序数颜色比例尺
let color = d3.scaleOrdinal(d3.schemeCategory10)
7. 其他比例尺
另外有一些函数比例尺的功能,从名称上就可见一斑。
d3.scaleIdentity() // 恒等比例尺
d3.scaleSqrt() // 乘方比例尺
d3.scalePow() // 类似scaleSqrt的乘方比例尺
d3.scaleLog() // 对数比例尺
d3.scaleQuantile() // 分位数比例尺
8. invert()
与invertExtent()
方法
上述的各种使用比例尺的例子都相当于一个正序的过程,从domain
的数据集映射到range
数据集中,那么有没有逆序的过程呢?D3中提供了invert()
以及invertExtent()
方法可以实现这个过程。
let scale = d3.scaleLinear().domain([1,5]).range([0,100])
scale.invert(50) // 输出:3
let scale2 = d3.scaleQuantize().domain([0,10]).range(['small', 'big'])
scale2.invertExtent('small') // 输出:[0,5]
不过,值得注意的是,这两种方法只针对连续性比例尺有效,即domain()
域为连续性数据集的比例尺。那么非连续性的比例尺就没有invert()
方法了吗?
收尾
到此,对于D3V4版本中的常见比例尺的映射关系都进行了介绍,而各个比例尺还提供了许多其他功能,比如在绘制坐标轴中用到的ticks()
,tickFormat()
等功能,具体API可以参见此处。关于第8点最后提出的问题,请听下回分解。
D3比例尺的更多相关文章
- d3 比例尺
.domain([, ]) 定义域范围 .range([, ]) 值域范围 var scale = d3.scale.linear() .domain([, ]) .range([, ]); 将100 ...
- D3.js使用过程中的常见问题(D3版本D3V4)
目录 一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式 三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中 ...
- 百度数据可视化图表套件echart实战
最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...
- 精通D3.js学习笔记(2)比例尺和坐标
1.线性比例尺 d3.scale.linear() 创建一个线性比例尺 .domain([0,500]) 定义域 .range([0,1000]) 值域 l ...
- D3.js 比例尺的使用
比例尺是 D3 中很重要的一个概念,直接用数值的大小来代表像素不是一种好方法 一.为什么需要比例尺 制作一个柱形图,会有一个数组:var dataset = [ 250 , 210 , 170 , 1 ...
- 【 D3.js 入门系列 — 4 】 如何使用比例尺( scale )
上一章中使用了一个很重要的概念 — 比例尺( scale ),本节将解说其使用方法. 1. 最大值和最小值 在介绍比例尺( scale )之前,先介绍两个经常和比例尺一起出现的函数,在[第3章]中也出 ...
- d3里的比例尺
// d3中的比例尺也有定义域和值域,分别是domain和range,开发者需要指定domain和range的范围,如此即可以得到一个计算关系: // 线性比例尺:能将一个连续的区间映射到另一区间,要 ...
- D3基础---比例尺
转载请注明出处! 比例尺简述: 比例尺是一组把输入域映射到输出范围的函数. 一般来说数据集中的值不可能恰好与图表中的像素尺度一一对应.比例尺就是把这些数据值映射到可视化图形中使用的新值的便捷手段. D ...
- D3.js系列——比例尺和坐标轴
比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...
随机推荐
- 【Linux】Jenkins安装(一)
摘要 本章介绍Jenkins的简单使用,关于Jenkins的安装,参照[Linux]Jenkins安装(一) 事例说明:在linux环境下,安装的jenkins,集成svn,tomcat的环境,项目是 ...
- Ajax不执行回调函数的原因(转)
今天用ajax的post请求后台,但是始终不执行回调函数,经查得知,ajax不执行回调函数的原因如下: jquery中规定返回的JSON字符串的KEY要用引号括起来,如{“result”: 1}这样才 ...
- 执行python解释器的两种方式
执行python解释器的两种方式 1.交互式 python是高级语言,是解释型语言,逐行翻译,写一句翻译一句 print ('hello world') 2.命令行式 python和python解释器 ...
- 用python写栈
class StackFullError(Exception): pass class StackEmptyError(Exception): pass class Stack: def __init ...
- SVN版本服务器搭建(服务端+客户端)
原文地址:http://www.cnblogs.com/warrior1988/p/5359084.html 环境:Win7 32 bit SVN简介:程序员在编写程序的过程中,每个程序员都会生成很多 ...
- 第01节:ActiveMQ入门和消息中间件
1.ActiveMQ最主要的功能:实现JMS Provider,用来帮助实现高可用.高性能.可伸缩.易用和安全的企业级面向消息服务的系统.是一个异步的功能. 2.ActiveMQ特点: 完全支持JMS ...
- kubernetes集群pod使用tc进行网络资源限额
kubernetes集群pod使用tc进行网络资源限额 Docker容器可以实现CPU,内存,磁盘的IO限额,但是没有实现网络IO的限额.主要原因是在实际使用中,构建的网络环境是往超级复杂的大型网络. ...
- java0426 wen IO2
- java0424 wen 集合框架2
- httplib和urllib2常用方法
都是几年前用过的,现在翻出来记录一下. import httplib import urllib2 import socket ##---------------------------------- ...