D3.js中的Scale用法

1 篇文章 0 订阅

在介绍 scale 之前,先介绍两个经常和 scale 一起出现的函数,在上一节中也出现了。
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[0]; } );

如此,返回的值为90, 因为比较的是30,52,90这三个数,最后一行的 d[0] 就是指定每一个数组的第一个值。
接下来介绍 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 的值为多少呢, 是 10 。它是根据线性函数计算的。 一定要记住, 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。 需要用的时候可到 d3js.org 查询API。D3.jsAPI

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值