成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

D3中常用的比例尺

booster / 2893人閱讀

摘要：比如輸入是，輸出是，輸入是，輸出是，那么這其中的映射關(guān)系就是你所定義的比例尺。映射關(guān)系輸入與輸出輸出輸出輸出當(dāng)輸入不是中的數(shù)據(jù)集時(shí)輸出輸出輸入不相關(guān)的數(shù)據(jù)依然可以輸出值。

D3中有個(gè)重要的概念就是比例尺。比例尺就是把一組輸入域映射到輸出域的函數(shù)。映射就是兩個(gè)數(shù)據(jù)集之間元素相互對(duì)應(yīng)的關(guān)系。比如輸入是1，輸出是100，輸入是5，輸出是10000，那么這其中的映射關(guān)系就是你所定義的比例尺。

D3中有各種比例尺函數(shù)，有連續(xù)性的，有非連續(xù)性的，本文對(duì)于常用比例尺進(jìn)行一一介紹。

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

使用d3.scaleLinear()創(chuàng)造一個(gè)線性比例尺，而domain()是輸入域，range()是輸出域，相當(dāng)于將domain中的數(shù)據(jù)集映射到range的數(shù)據(jù)集中。

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

映射關(guān)系：

接下來(lái)，我們來(lái)研究這個(gè)比例尺的輸入和輸出。

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

剛才的輸入都是使用了domain區(qū)域里的數(shù)據(jù)，那么使用區(qū)域外的數(shù)據(jù)會(huì)得出什么結(jié)果呢？

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

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

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

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

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

映射關(guān)系：

看一下輸入與輸出：

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

當(dāng)輸入不是domain()中的數(shù)據(jù)集時(shí)：

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

由此可見，d3.scaleBand()只針對(duì)domain()中的數(shù)據(jù)集映射相應(yīng)的值。

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

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

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

映射關(guān)系：

輸入與輸出：

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

當(dāng)輸入不是domain()中的數(shù)據(jù)集時(shí)：

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

輸入不相關(guān)的數(shù)據(jù)依然可以輸出值。所以在使用時(shí)，要注意輸入數(shù)據(jù)的正確性。

我們從上面的映射關(guān)系中可以看出，domain()和range()的數(shù)據(jù)是一一對(duì)應(yīng)的，如果兩邊的值不一樣呢？下面兩張圖說(shuō)明這個(gè)問(wèn)題：

domain()的值按照順序循環(huán)依次對(duì)應(yīng)range()的值。

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

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

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

映射關(guān)系：

輸入與輸出：

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

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

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

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

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

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

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

時(shí)間比例尺較多用在根據(jù)時(shí)間順序變化的數(shù)據(jù)上。另外有一個(gè)d3.scaleUtc()是依據(jù)世界標(biāo)準(zhǔn)時(shí)間(UTC)來(lái)計(jì)算的。

6. 顏色比例尺

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

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

// 定義一個(gè)序數(shù)顏色比例尺
let color = d3.scaleOrdinal(d3.schemeCategory10)
7. 其他比例尺

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

d3.scaleIdentity() // 恒等比例尺
d3.scaleSqrt() // 乘方比例尺
d3.scalePow() // 類似scaleSqrt的乘方比例尺
d3.scaleLog() // 對(duì)數(shù)比例尺
d3.scaleQuantile() // 分位數(shù)比例尺
8. invert()與invertExtent()方法

上述的各種使用比例尺的例子都相當(dāng)于一個(gè)正序的過(guò)程，從domain的數(shù)據(jù)集映射到range數(shù)據(jù)集中，那么有沒(méi)有逆序的過(guò)程呢？D3中提供了invert()以及invertExtent()方法可以實(shí)現(xiàn)這個(gè)過(guò)程。

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]

不過(guò)，值得注意的是，這兩種方法只針對(duì)連續(xù)性比例尺有效，即domain()域?yàn)檫B續(xù)性數(shù)據(jù)集的比例尺。那么非連續(xù)性的比例尺就沒(méi)有invert()方法了嗎？

收尾

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85230.html

相關(guān)文章

  • 交互式數(shù)據(jù)可視化－D3.js（三）比例尺

    摘要：設(shè)置為，則所有超出值域范圍的值，都會(huì)被收縮到值域之內(nèi)。指數(shù)比例尺相對(duì)線性比例尺多出一個(gè)用于指定指數(shù)。這段代碼中相當(dāng)于定義一個(gè)線性比例尺。使用量子比例尺后定義域?qū)⒈环殖蛇@段，分別對(duì)應(yīng)值域的個(gè)值。 線性比例尺 線性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 創(chuàng)建一個(gè)定量的線性比例尺. linear.domain([numbers]) - ...

    huhud 評(píng)論0 收藏0

  • 交互式數(shù)據(jù)可視化－D3.js（三）比例尺

    摘要：設(shè)置為，則所有超出值域范圍的值，都會(huì)被收縮到值域之內(nèi)。指數(shù)比例尺相對(duì)線性比例尺多出一個(gè)用于指定指數(shù)。這段代碼中相當(dāng)于定義一個(gè)線性比例尺。使用量子比例尺后定義域?qū)⒈环殖蛇@段，分別對(duì)應(yīng)值域的個(gè)值。 線性比例尺 線性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 創(chuàng)建一個(gè)定量的線性比例尺. linear.domain([numbers]) - ...

    graf 評(píng)論0 收藏0

  • D3.js可視化前端框架的使用要點(diǎn)

    摘要：該事件不會(huì)區(qū)分字母的大小寫，例如和被視為一致。這些布局的作用都是將某種數(shù)據(jù)轉(zhuǎn)換成另一種數(shù)據(jù)，而轉(zhuǎn)換后的數(shù)據(jù)是利于可視化的。而有元素與數(shù)據(jù)對(duì)應(yīng)的部分稱為。 1.安裝

    MASAILA 評(píng)論0 收藏0

  • d3入門篇（三）：比例尺坐標(biāo)軸

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

    tomato 評(píng)論0 收藏0

  • d3.js 創(chuàng)建完整柱形圖

    摘要：之前只是各個(gè)部分的，現(xiàn)在將各部分整合起來(lái)，發(fā)現(xiàn)還是學(xué)到了不少東西主要是加深了對(duì)比例尺的理解代碼樣式及數(shù)據(jù)樣式接著是數(shù)據(jù)及柱狀圖寬高等留白用創(chuàng)建比例尺實(shí)踐之后對(duì)比例尺與坐標(biāo)軸的理解加深了一點(diǎn)軸使用線性比例尺，注意輸入域軸使用比例尺用于柱形 d3js.org v5.9.2 之前只是各個(gè)部分的demo，現(xiàn)在將各部分整合起來(lái)，發(fā)現(xiàn)還是學(xué)到了不少東西 主要是加深了對(duì)scale（比例尺）的理解...

    snowLu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<