D3中常用的比例尺

booster 發布于2019-08-20 19:09 / 2882人閱讀

摘要：比如輸入是，輸出是，輸入是，輸出是，那么這其中的映射關系就是你所定義的比例尺。映射關系輸入與輸出輸出輸出輸出當輸入不是中的數據集時輸出輸出輸入不相關的數據依然可以輸出值。

D3中有個重要的概念就是比例尺。比例尺就是把一組輸入域映射到輸出域的函數。映射就是兩個數據集之間元素相互對應的關系。比如輸入是1，輸出是100，輸入是5，輸出是10000，那么這其中的映射關系就是你所定義的比例尺。

D3中有各種比例尺函數，有連續性的，有非連續性的，本文對于常用比例尺進行一一介紹。

1. d3.scaleLinear() 線性比例尺

使用d3.scaleLinear()創造一個線性比例尺，而domain()是輸入域，range()是輸出域，相當于將domain中的數據集映射到range的數據集中。

let scale = d3.scaleLinear().domain([1,5]).range([0,100])

映射關系：

接下來，我們來研究這個比例尺的輸入和輸出。

scale(1) // 輸出:0
scale(4) // 輸出:75
scale(5) // 輸出:100

剛才的輸入都是使用了domain區域里的數據，那么使用區域外的數據會得出什么結果呢？

scale(-1) // 輸出:-50
scale(10) // 輸出:225

所以這只是定義了一個映射規則，映射的輸入值并不局限于domain()中的輸入域。

2. d3.scaleBand() 序數比例尺

d3.scaleBand()并不是一個連續性的比例尺，domain()中使用一個數組，不過range()需要是一個連續域。

let scale = d3.scaleBand().domain([1,2,3,4]).range([0,100])

映射關系：

看一下輸入與輸出：

scale(1) // 輸出:0
scale(2) // 輸出:25
scale(4) // 輸出:75

當輸入不是domain()中的數據集時：

scale(0)  // 輸出:undefined
scale(10) // 輸出:undefined

由此可見，d3.scaleBand()只針對domain()中的數據集映射相應的值。

3. d3.scaleOrdinal() 序數比例尺

d3.scaleOrdinal()的輸入域和輸出域都使用離散的數據。

let scale = d3.scaleOrdinal().domain(["jack", "rose", "john"]).range([10, 20, 30])

映射關系：

輸入與輸出：

scale("jack") // 輸出:10
scale("rose") // 輸出:20
scale("john") // 輸出:30

當輸入不是domain()中的數據集時：

scale("tom") // 輸出:10
scale("trump") // 輸出:20

輸入不相關的數據依然可以輸出值。所以在使用時，要注意輸入數據的正確性。

我們從上面的映射關系中可以看出，domain()和range()的數據是一一對應的，如果兩邊的值不一樣呢？下面兩張圖說明這個問題：

domain()的值按照順序循環依次對應range()的值。

4. d3.scaleQuantize() 量化比例尺

d3.scaleQuantize()也屬于連續性比例尺。定義域是連續的，而輸出域是離散的。

let scale = d3.scaleQuantize().domain([0, 10]).range(["small", "medium", "long"])

映射關系：

輸入與輸出：

scale(1) // 輸出:small
scale(5.5) // 輸出:medium
scale(8) // 輸出:long

而對于domain()域外的情況：

scale(-10) // 輸出：small
scale(10) // 輸出：long

大概就是對于domain()域的兩側的延展。

5. d3.scaleTime() 時間比例尺

d3.scaleTime()類似于d3.scaleLinear()線性比例尺，只不過輸入域變成了一個時間軸。

let scale = d3.scaleTime()
              .domain([new Date(2017, 0, 1, 0), new Date(2017, 0, 1, 2)])
              .range([0,100])

輸入與輸出：

scale(new Date(2017, 0, 1, 0)) // 輸出:0
scale(new Date(2017, 0, 1, 1)) // 輸出:50

時間比例尺較多用在根據時間順序變化的數據上。另外有一個d3.scaleUtc()是依據世界標準時間(UTC)來計算的。

6. 顏色比例尺

D3提供了一些顏色比例尺，10就是10種顏色，20就是20種：

d3.schemeCategory10
d3.schemeCategory20
d3.schemeCategory20b
d3.schemeCategory20c

// 定義一個序數顏色比例尺
let color = d3.scaleOrdinal(d3.schemeCategory10)

7. 其他比例尺

另外有一些函數比例尺的功能，從名稱上就可見一斑。

d3.scaleIdentity() // 恒等比例尺
d3.scaleSqrt() // 乘方比例尺
d3.scalePow() // 類似scaleSqrt的乘方比例尺
d3.scaleLog() // 對數比例尺
d3.scaleQuantile() // 分位數比例尺

8. invert()與invertExtent()方法

上述的各種使用比例尺的例子都相當于一個正序的過程，從domain的數據集映射到range數據集中，那么有沒有逆序的過程呢？D3中提供了invert()以及invertExtent()方法可以實現這個過程。

let scale = d3.scaleLinear().domain([1,5]).range([0,100])
scale.invert(50) // 輸出:3

let scale2 = d3.scaleQuantize().domain([0,10]).range(["small", "big"])
scale2.invertExtent("small") // 輸出:[0,5]

不過，值得注意的是，這兩種方法只針對連續性比例尺有效，即domain()域為連續性數據集的比例尺。那么非連續性的比例尺就沒有invert()方法了嗎？

收尾

到此，對于D3V4版本中的常見比例尺的映射關系都進行了介紹，而各個比例尺還提供了許多其他功能，比如在繪制坐標軸中用到的ticks()，tickFormat()等功能，具體API可以參見此處。關于第8點最后提出的問題，請聽下回分解。

云服務器 GPU云服務器 linux系統中的常用命令現在企業中常用的分布式存儲服務 js設置的比例縮放 linux中常用別名

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85230.html

交互式數據可視化－D3.js（三）比例尺

摘要：設置為，則所有超出值域范圍的值，都會被收縮到值域之內。指數比例尺相對線性比例尺多出一個用于指定指數。這段代碼中相當于定義一個線性比例尺。使用量子比例尺后定義域將被分成這段，分別對應值域的個值。線性比例尺線性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 創建一個定量的線性比例尺. linear.domain([numbers]) - ...

huhud 2019-08-02 11:54 評論0 收藏0
交互式數據可視化－D3.js（三）比例尺

摘要：設置為，則所有超出值域范圍的值，都會被收縮到值域之內。指數比例尺相對線性比例尺多出一個用于指定指數。這段代碼中相當于定義一個線性比例尺。使用量子比例尺后定義域將被分成這段，分別對應值域的個值。線性比例尺線性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 創建一個定量的線性比例尺. linear.domain([numbers]) - ...

graf 2019-08-23 12:42 評論0 收藏0
D3.js可視化前端框架的使用要點

摘要：該事件不會區分字母的大小寫，例如和被視為一致。這些布局的作用都是將某種數據轉換成另一種數據，而轉換后的數據是利于可視化的。而有元素與數據對應的部分稱為。 1.安裝

MASAILA 2019-08-22 14:57 評論0 收藏0
d3入門篇（三）：比例尺坐標軸

摘要：為了根據顯示刻度靈活變化寬高，而不是定死，特別是數據差異性很大的時候，我們希望圖表顯示范圍都在畫布里面，這時就會引入比例尺的概念來進行縮放。根據這些規則，會為我們返回一個比例尺函數。這篇文章繼續介紹d3的基礎知識比例尺在繪制柱狀圖時，我們往往會定義很大的畫布，然而我們要可視化的數據確很小，這時會出現很多留白的情況。為了根據顯示刻度靈活變化寬高，而不是定死，特別是數據差異性很大的...

tomato 2019-08-23 14:03 評論0 收藏0
d3.js 創建完整柱形圖

摘要：之前只是各個部分的，現在將各部分整合起來，發現還是學到了不少東西主要是加深了對比例尺的理解代碼樣式及數據樣式接著是數據及柱狀圖寬高等留白用創建比例尺實踐之后對比例尺與坐標軸的理解加深了一點軸使用線性比例尺，注意輸入域軸使用比例尺用于柱形 d3js.org v5.9.2 之前只是各個部分的demo，現在將各部分整合起來，發現還是學到了不少東西主要是加深了對scale（比例尺）的理解...

snowLu 2019-08-23 16:44 評論0 收藏0