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

定量比例尺 :

数学上有函数的概念，不是编程中所说的函数，如线性函数、指数函数、对数函数等，而指的是一个量随着另一个量的变化而变化。例如有一下线性函数 : y=2x+1该函数在二维坐标系中绘制出来的图形是一条直线，如果限制x的范围为[0,2]，则可计算得到y的范围为[1,5]。x的范围[0,2]称为该函数的定义域，y的范围称为该函数的值域。根据x计算得到y的方法称为对应法则。定义域、值域、对应法则称为函数的三要素。

在数据可视化中，常需要像上述函数一样，将一个量转换为另一个量。D3提供了这样的转换方法，称为比例尺(scale)。

我们现在所说的定量比例尺，是指当定义域是连续的情况。从0~2之间的所有值，称为连续的值。类似0、1、2这样的值，称为离散的值

定量比例尺包括 : 线性比例尺、指数比例尺、对数比例尺、量子比例尺、分位比例尺和阈值比例尺。

按上面顺序，首先先介绍线性比例尺。

线性比例尺

线性比例尺(Linear Scale)是常用比例尺，与线性函数类似，计算线性的对应关系。相关方法有:

d3.scaleBand.linear() 　　　　　　

//创建一个比例尺。

linear(x) 　　　　　　　　　　　　

//输入一个在定义域内的值x，返回值域内对应的值。

linear.invert(y) 　　　　　　　　　

//输入一个在值域内的值，返回定义域内对应的值。

linear.domain([numbers]) 　　　　

//设定或获取定义域

linear.range([values]) 　　　　　　

//设定或获取值域

linear.rangeRound([values]) 　　　

//代替range()使用的话，比例尺的输出值会进行四舍五入的运算，结果为整数。

linear.clamp([boolean])　　　　

//默认被设置为false，当该比例尺接受一个超出定义域范围内的值时，依然能够按照同样的计算方法计算得到一个值，这个值可能是超出值域范围的，如果设置为true，则任何超出值域的范围的值，都会被收缩到值域范围内。

linear.nice([count]) 　　　　　　

//将定义域的范围扩展成比较理想的形式。例如，定义域为[0.50000543,0.899995433221],则使用nice()之后，其定义域变为[0.5,0.9]。对于[0.500000543,69.99998888]这样的定义域，则自动将其变为[0,70].

linear.ticks([count]) 　　　　　　

//设定或获取定义域内具有代表性的值得数目。count默认为10，如果定义域[0,70]，则该函数返回[0,10,20,30,40,50,60,70]。如果count设置为3，则返回 [0,20,40,60]。该方法主要用于选取坐标轴刻度。

linear.tickFormat(count,[format])

//用于设置定义域内具有代表性的值得表示形式，如显示到小数点后两位，使用百分比的形式显示，主要用于坐标轴上。

以上方法中,linear(x)、invert()、domain()、range()是基础方法，使用形式看代码:

1 var linear = d3.scale.linear()
2                     .domain([0,20])     //设置定义域为[0,20]
3                     .range([0,100])     //设置值域为[0,100]
4
5         console.log(linear(10))         //返回值50
6         console.log(linear(30))         //返回值150
7         console.log(linear.invert(80))  //返回值16

用linear()计算的结果是，输出都是输入值得5倍。而使用linear.invert()时，输出都是输入值得五分之一。要注意的是，倒数第二行，linear()接收了一个超出定义域范围的值30，结果还是正常输出其乘以5之后的值150.此输出值也超过了值域的范围如果不希望其超出范围，可以使用clamp()，代码如下:

1 linear.clamp(true)
2 console.log(linear(30))         //返回值100

将clamp()设置为true后，超出值域的值会取值域的上下限作为输出。对于输出的数值，如果希望对其进行四舍五入，要使用rangRound()来设置:

1  linear.rangeRound([0,100]);
2  console.log(linear(13.33))      //返回值67

如果不用rangeRound()重新设置值域，则输出值为66.649999999999,其四舍五入后值为67.如果定义域中有无穷小数，可用nice(),代码:

1 linear.domain([0.123000000,0.488888888])
2             .nice()
3         console.log(linear.domain())    //返回值[0.1,0.5]
4
5
6         linear.domain([33.611111,45.97745])
7             .nice()
8         console.log(linear.domain())    //返回值[33,46]

应用nice()后，定义域变成了比较工整的形式，但是并不是四舍五入。最后讲解ticks()和tickFormat()的用法，它们主要是用在坐标轴上的。看代码:

 1 var linear2 = d3.scale.linear()
 2                         .domain([-20,20])
 3                         .range([0,100])
 4         var ticks = linear2.ticks(5);
 5         console.log(ticks)              //返回值[-20, -10, 0, 10, 20]
 6
 7         var tickFormat = linear2.tickFormat(5,"+");
 8         for (var i = 0; i < ticks.length ; i++){
 9             //ticks数组中的每一个值，都使用一次tickFormat()函数
10             ticks[i] = tickFormat(ticks[i])
11         }
12         console.log(ticks)              //返回值["-20", "-10", "+0", "+10", "+20"]

这段代码中，比例尺的定义域为[-20,20]，调用ticks(5)之后返回一个数组，分别是该定义域内具有代表性的值。然后，调用tickFormat(),返回值是一个函数，因此调用时要使用函数的调用方式。最终结果是，ticks变成了设定的格式。此外设定的格式为"+":表示如果是正数，则在前面添加一个加号，负数则添加一个减号。除此之外，常用的格式还有%、$等，遵循迷你语言格式规范。

比例尺的domain()和range()最少放入两个数，可以超过两个数，但两者的数量必须相等，放入三个数的情况如下，代码:

1 var scale = d3.scale.linear();
2         scale.domain([0,20,40])
3             .range([0,100,150]);
4         console.log(scale(30))          //返回值125

这表示有两个线性函数，当输入的值为30时，属于domain的20~40的范围，那么输出为100~150范围。

下一文章介绍指数比例尺和对数比例尺。

转载于:https://www.cnblogs.com/littleSpill/p/10821332.html

D3.js比例尺定量比例尺之线性比例尺(v3版本)相关推荐

比例尺---定量比例尺
比例尺:就像函数一样,将一个量转换为另一个量,定义域到值域的转换. 每个比例尺都需要指定一个domain(定义域)和range(值域). 定量比例尺:定义域是连续的.值域有连续的也有离散的. 1.线性 ...
d3.js——比例尺的使用
在学习d3.js的时候,发现有个函数报错 var linear = d3.scale.linear() 控制台显示找不到linear() 百度后知道这是新版d3(v4)和旧版的d3(v3)的原因新版 ...
D3.js(v3版本）
D3.js <script src="https://d3js.org/d3.v6.min.js"></script> import * as d3 fro ...
d3.js v3版本实现-树状图
参考的例子:http://bl.ocks.org/robschmuecker/7880033 一.为什么选择d3.js 二.d3.js概述三:树状图实现 1.创建svg 2.在svg元素里面画一个g ...
D3.js绘制颜色:RGB、HSL和插值 (V3版本)
转载地址:D3.js绘制颜色:RGB.HSL和插值 (V3版本) 如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation).D3提供了d3.intrerpolateRgb()来处 ...
D3 v3版本绘制力导向图更新节点时JS控制台报错：Error: circle attribute cx: Expected length, NaN解决办法
D3的v3版本,很古老了. 拿来绘制力导向图,画布初始化的代码如下: //代码不完整,仅作演示以说明问题 //节点数组var nodes = [ { name: "sssss" , ...
d3库(d3.js) 持续整理
d3.js d3.js是基于数据操作文档的js库,集强力可视化组建与数据驱动型的dom操作手法于一身. 本质上是js,在数据可视化方面,d3将生成可视化的步骤精简到了几个简单的函数. 来源:http: ...
【D3.js开发入门：绘制图表】静态图表
什么是 D3.js? D3.js是用于 HTML 和 SVG 实现的 JavaScript 可视化库.基于数据操作文档的 JavaScript 库. 说到D3不得不提到Echarts,Echarts和 ...
d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...

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

D3.js比例尺定量比例尺之线性比例尺(v3版本)相关推荐

最新文章

热门文章

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

D3.js比例尺 定量比例尺 之 线性比例尺(v3版本)相关推荐

最新文章

热门文章

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

D3.js比例尺定量比例尺之线性比例尺(v3版本)相关推荐