美文网首页
03-D3.js比例尺

03-D3.js比例尺

作者: learninginto | 来源:发表于2021-10-22 20:30 被阅读0次
image.png

之前绘图时,我们直接将数组中的值作为矩形元素的宽/高度,这种方式非常有局限性,如果数值大小比较极端,例如:

var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
var dataset_2 = [ 2500, 2100, 1700, 1300, 900 ];

对以上两个数组,绝不可能用 2.5 、0.9个像素来代表矩形的宽度,那样根本看不见;也不可能用 2500 个像素来代表矩形的宽度,因为画布没有那么长。

于是,我们需要一种计算关系,能够:将某一区域的值映射到另一区域,其大小关系不变。这就是比例尺(Scale)。

比例尺的使用

比例尺就是把一组输入域映射到输出域的函数。映射就是两个数据集之间元素相互对应的关系。比如输入是1,输出是100,输入是5,输出是10000,那么这其中的映射关系就是你所定义的比例尺。

D3中有各种比例尺函数,有连续性的,有非连续性的

1. d3.scaleLinear() 线性比例尺

使用d3.scaleLinear()创造一个线性比例尺,而domain()是输入域,range()是输出域,相当于将domain中的数据集映射到range的数据集中。

let scale = d3.scaleLinear().domain([1,5]).range([0,100])

映射关系:

Domain.png

接下来,我们来研究这个比例尺的输入和输出。

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])

映射关系:

scaleBand.png

看一下输入与输出:

scale(1) // 输出:0
scale(2) // 输出:25
scale(4) // 输出:75

当输入不是domain()中的数据集时:

scale(0)  // 输出:undefined
scale(10) // 输出:undefined
scale.bandwidth();//domain 映射到range上的宽度

由此可见,d3.scaleBand()只针对domain()中的数据集映射相应的值。

3. d3.scaleOrdinal() 序数比例尺

d3.scaleOrdinal()的输入域和输出域都使用离散的数据。

let scale = d3.scaleOrdinal().domain(['jack', 'rose', 'john']).range([10, 20, 30])

映射关系:

scaleOrdinal.png

输入与输出:

scale('jack') // 输出:10
scale('rose') // 输出:20
scale('john') // 输出:30

当输入不是domain()中的数据集时:

scale('tom') // 输出:10
scale('trump') // 输出:20

输入不相关的数据依然可以输出值。所以在使用时,要注意输入数据的正确性。

我们从上面的映射关系中可以看出,domain()和range()的数据是一一对应的,如果两边的值不一样呢?下面两张图说明这个问题:

image.png

domain()的值按照顺序循环依次对应range()的值。

image.png

4. d3.scaleQuantize() 量化比例尺

d3.scaleQuantize()也属于连续性比例尺。定义域是连续的,而输出域是离散的。

let scale = d3.scaleQuantize().domain([0, 10]).range(['small', 'medium', 'long'])

映射关系:

量化比例尺.png

输入与输出:

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(2021, 9,9,0), new Date(2020 2, 2)]).range([0,100])

输入与输出:

scale(new Date(2021, 9, 9, 0)) // 输出:0
scale(new Date(2021, 9, 9, 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()方法可以实现这个过程。

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()域为连续性数据集的比例尺。

给柱形图添加比例尺

<div id="test-svg">
</div>
var svg = d3.select("#test-svg")
    .append('svg')

var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];

var linear = d3.scaleLinear()
    .domain([0, d3.max(dataset)])
    .range([0, 250]);
var rectHeight = 25;  

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", 20)
    .attr("y", function (d, i) {
        return i * rectHeight;
    })
    .attr("width", function (d) {
        return linear(d);   //在这里用比例尺
    })
    .attr("height", rectHeight - 2)
    .attr("fill", "steelblue");

相关文章

  • 03-D3.js比例尺

    之前绘图时,我们直接将数组中的值作为矩形元素的宽/高度,这种方式非常有局限性,如果数值大小比较极端,例如: 对以上...

  • 地图的故事

    1、比例尺的表示方法:文字式、线段式、数字式 2、比例尺大小的比较:分母越大,比例尺越小;分母越小,比例尺越大。 ...

  • D3.js --- 第二章 比例尺与坐标轴

    4种常用的比例尺: 线性、序数、序数段、时间比例尺 d3.scaleLinear() //线性比例尺 如 [...

  • D3系列07-比例尺

    比例尺是用来映射值域(真实值)和画布(svg)之间对应关系的工具。 比例尺分为线性比例尺,d3.scale.lin...

  • D3之比例尺

    线性比例尺 Linear Scale d3.scale.linear() 创建线性比例尺 linear.domai...

  • 六年级数学典型题型(一) 正元学堂

    1、比例尺问题:注意面积的比例尺 【相关例题】在比例尺为1:2000的沙盘上,实际面积为800000平方米的生态公...

  • 第四章 比例尺

    比例尺 连续比例尺continuous continuous(value) //给定domain范围中的一个val...

  • d3.js关于比例尺报Cannot read property

    在学习d3比例尺的时候关于比例尺报Cannot read property 'linear' of undefin...

  • D3 v5 学习笔记-3 坐标轴概览

    D3中,比例尺和坐标轴是非常重要而且紧密相关的两个概念。 比例尺: D3的比例尺:https://g...

  • 可视化D3.js库(6)-比例尺

    D3.js库-6-比例尺的使用 比例尺在D3中是一个非常实用的工具,可以这样理解比例尺:的关系,从domain映射...

网友评论

      本文标题:03-D3.js比例尺

      本文链接:https://www.haomeiwen.com/subject/pmehaltx.html