D3.js中使用scale

最新推荐文章于 2024-03-25 09:40:15 发布

转载最新推荐文章于 2024-03-25 09:40:15 发布 · 2.5k 阅读

文章标签：

#d3

d3 专栏收录该内容

8 篇文章

订阅专栏

本文深入解析D3.js中的scale函数及其在数据可视化的应用，包括最大值、最小值查找函数和scale的基本用法，如线性函数、范围、domain设置以及nice()、rangeRound()方法的使用。

先介绍两个经常和 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。

其它比例尺

除了线性（linear）比例尺，D3还内置了另外几个比例尺方法。

sqrt

平方根比例尺。

pow

幂比例尺，适合值以指数级变化的数据集。

log

对数比例尺。

quantize

输出范围为独立的值的线性比例尺，适合想把数据分类的情形。

quantile

与quantize类似，但输入值域是独立的值，适合已经对数据分类的情形。

ordinal

使用非定量值（如类名）作为输出的序数比例尺，非常适合比较苹果和桔子。

d3.scale.category10() 、d3.scale.category20()、d3.scale.category20b()和d3.scale.category20c()

能够输出10到20种类别颜色的预设序数比例尺，非常方便。

d3.time.scale()

针对日期和时间值的一个比例尺方法，可以对日期刻度作特殊处理。领略了比例尺的威力之后，该通过一些东西来表达它们了，通过什么呢？对，数轴！