【 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