【 D3.js 入門系列 --- 4 】 如何使用scale（比例）

   在上一節中使用了一個很重要的概念 — scale （這個不知道翻譯成什么，暫且叫它比例）。本節將重點介紹它的相關使用方法。

    在介紹 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 的值為多少呢， 是 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。 需要用的時候可到 d3js.org 查詢API。

 

 

 

 

來自：

博客為： www.ourd3js.com     csdn博客為： blog.csdn.net/lzhlzz