【 D3.js 入门系列 — 4 】 如何使用比例尺( scale )
2015-07-27 22:54
716 查看
上一章中使用了一个很重要的概念 — 比例尺( scale ),本节将解说其使用方法。
d3.max()
d3.min()
这两个函数用于求一个数组中的最大值和最小值,如果是一维数组,使用方法如下:
变量 result 中保存的是数组 dataset 的最大值 52。这是一维数组的用法,二维数组的用法如下:
如此,返回的值为 20 , 因为比较的是 20 , 2 , 11 这三个数,最后一行的 d[1] 表示指定每一个数组的第二个值。
为什么要使用 scale 呢?假设现在要为一个汽车公司做数据可视化,要将每月的汽车销量用柱形图表示,假设这个月有 100 销量,用 100 个像素长度的柱子来表示。下个月 500 销量,用 500 个像素表示,再下个月有 3000 台呢?不可能用3000个像素,浏览器长度也不够。这时候就要用到 scale (比例尺)了。
在 scale 中,给定一个 domain (定义域),给定一个 range (值域) ,即可进行数值之间的转换。
最常用的 scale 是线性函数。它的用法如下:
d3.scale.linear() 指定使用线性函数的 scale 。后两行指定 scale 的 domain 和 range ,这里分别为 [ 0 , 20 ] 和 [ 0 , 100 ],如果不指定,它们默认都为 [ 0 , 1 ] 。接下来调用 scale 函数,传了一个参数 10 给它,返回值保存在 result 中。 result 的值为多少呢, 是 50 。它是根据线性函数计算的。要记住, scale 是一个函数。
domain 和 range 最少放入两个数,可以超过两个数,但两者的数量必须相等,如下为放入3个数的情况:
这表示有两个线性函数,当输入的值为 30 时,属于 domain (定义域)的 20 – 40 这个范围,那么输出为 100 – 150 这个范围。这里的 30 对应的值为 125 ,所以 result 的值为 125 。
d3.scale.linear() 中还有一些函数,这里介绍两个:
nice() ,改变函数的 domain ,能自动把 0.00000000000001 变为最接近它的 0 , 9.999999991 变为最接近它的 10
rangeRound() , 能自动把输出变为最接近它的整数。
调用的时候形如:
上面介绍的是最常用的线性函数的 scale ,其他还有 sqrt ,pow,log,quantize,ordinal 等等各种 scale。 需要的时候可查询官方 API 。
1. 最大值和最小值
在介绍比例尺( scale )之前,先介绍两个经常和比例尺一起出现的函数,在【第3章】中也出现了。d3.max()
d3.min()
这两个函数用于求一个数组中的最大值和最小值,如果是一维数组,使用方法如下:
var dataset = [ 30, 20 , 52 , 2 , 11 ]; var result = d3.max( dataset );
变量 result 中保存的是数组 dataset 的最大值 52。这是一维数组的用法,二维数组的用法如下:
var dataset = [ [ 30 , 20 ] , [ 52 , 2 ] , [ 90 , 11 ] ]; var result = d3.max( dataset , function(d){ return d[1]; } );
如此,返回的值为 20 , 因为比较的是 20 , 2 , 11 这三个数,最后一行的 d[1] 表示指定每一个数组的第二个值。
2. 比例尺
接下来说明 scale (比例尺)的用法,首先要明确一点: scale 是函数,不错,是函数。为什么要使用 scale 呢?假设现在要为一个汽车公司做数据可视化,要将每月的汽车销量用柱形图表示,假设这个月有 100 销量,用 100 个像素长度的柱子来表示。下个月 500 销量,用 500 个像素表示,再下个月有 3000 台呢?不可能用3000个像素,浏览器长度也不够。这时候就要用到 scale (比例尺)了。
在 scale 中,给定一个 domain (定义域),给定一个 range (值域) ,即可进行数值之间的转换。
最常用的 scale 是线性函数。它的用法如下:
var scale = d3.scale.linear(); scale.domain([0,20]) .range([0,100]); var result = scale(10);
d3.scale.linear() 指定使用线性函数的 scale 。后两行指定 scale 的 domain 和 range ,这里分别为 [ 0 , 20 ] 和 [ 0 , 100 ],如果不指定,它们默认都为 [ 0 , 1 ] 。接下来调用 scale 函数,传了一个参数 10 给它,返回值保存在 result 中。 result 的值为多少呢, 是 50 。它是根据线性函数计算的。要记住, scale 是一个函数。
domain 和 range 最少放入两个数,可以超过两个数,但两者的数量必须相等,如下为放入3个数的情况:
var scale = d3.scale.linear(); scale.domain([0,20,40]) .range([0,100,150]); var result = scale(30);
这表示有两个线性函数,当输入的值为 30 时,属于 domain (定义域)的 20 – 40 这个范围,那么输出为 100 – 150 这个范围。这里的 30 对应的值为 125 ,所以 result 的值为 125 。
d3.scale.linear() 中还有一些函数,这里介绍两个:
nice() ,改变函数的 domain ,能自动把 0.00000000000001 变为最接近它的 0 , 9.999999991 变为最接近它的 10
rangeRound() , 能自动把输出变为最接近它的整数。
调用的时候形如:
scale.domain([0.000000001,9.99999999991]) .range([0,100]) .nice();
上面介绍的是最常用的线性函数的 scale ,其他还有 sqrt ,pow,log,quantize,ordinal 等等各种 scale。 需要的时候可查询官方 API 。
相关文章推荐
- angular.js初探
- JS判断对象是否存在的10种方法
- js中this的用法小结
- 关于块级元素,行级元素和javascript的一些总结
- js获取select标签选中的值
- JavaScript动态操作表格实例(添加,删除行,列及单元格)
- Javascript format方法
- js 操作 table
- web优化 js性能高级篇
- js 操作 table
- 学习 JavaScript 最难点之二 -- 理解closure(闭包)
- KnockoutJS的使用及分析
- JavaScript学习笔记2:JavaScript基本概念
- 关于Html,Css,JavaScript知识点的简单梳理
- JS函数式编程【译】2.1 函数式编程语言
- JS常用正则表达式
- Javascript我学之六对象工厂函数与构造函数
- 最常用的javascript方法函数
- JavaScript 取整
- SVC入门知识和JSVM基础实验