国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

graf / 2436人閱讀

摘要：設(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]) - 定義或獲取定義域

linear.range([values]) - 定義或獲取值域

linear(x) - 輸入一個(gè)定義域內(nèi)的值，返回一個(gè)值域的值

linear.invert(y) - 輸入一個(gè)值域的值，返回一個(gè)定義域的值

linear.rangeRound([values]) - 代替range(), 比例尺的輸出值會(huì)進(jìn)行四舍五入返回整型

linear.clamp([boolean]) - 默認(rèn)flase，當(dāng)比例尺接受一個(gè)超出定義域范圍的值當(dāng)時(shí)候，依然能夠按照同樣的計(jì)算方法得到一個(gè)值，這個(gè)值是超出值域范圍的。設(shè)置為true，則所有超出值域范圍的值，都會(huì)被收縮到值域之內(nèi)。

linear.nice([count]) - 將定義域的值擴(kuò)展成比較理想的值并非四舍五入

linear.ticks([count]) - 設(shè)定或獲取坐標(biāo)軸刻度

大致的使用形式:

var linear = d3.scaleLinear().domain([0, 90]).rangeRound([0, 100]).clamp(true);
console.log(linear(95));  // 100
console.log(linear.nice().ticks(9)); //[0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
console.log(linear.range()); //[0, 100]
指數(shù)，量子，閾值比例尺

比例尺中很多方法都是相同的，例如domain(), range(), invert()等，名稱和作用都是相同的，下面指出一些不同的地方。

指數(shù)比例尺

相對(duì)線性比例尺多出一個(gè)exponent()用于指定指數(shù)。使用方法如下：

var pow = d3.scalePow().exponent(3).domain([0, 3]).rangeRound([0, 90]);
console.log(pow(2)); //27

指數(shù)為3，輸入為2。這段代碼中相當(dāng)于定義一個(gè)線性比例尺。定義域?yàn)閇0, 27], 值域?yàn)閇0, 90]，當(dāng)計(jì)算2的3次方得到的結(jié)果為8，在對(duì)這個(gè)結(jié)果應(yīng)用線性比例尺，最終到27，驗(yàn)證著一點(diǎn)，請(qǐng)看如下代碼：

var pow = d3.scalePow().exponent(3).domain([0, 3]).rangeRound([0, 90]);
var linear = d3.scaleLinear().domain([0, Math.pow(3, 3)]).rangeRound([0, 90]);
console.log(pow(2)); //27
console.log(linear(Math.pow(2, 3))); //27
量子比例尺

量子比例尺定義域是連續(xù)的。值域是離散的，結(jié)果是對(duì)應(yīng)的離散值。

var quantize = d3.scaleQuantize().domain([0, 10]).range(["a", "b", "c", "d", "e"]);
console.log(quantize(1)) //a
console.log(quantize(4.1)) //c

使用量子比例尺后定義域?qū)⒈环殖蒣0, 2],[2, 4],[4, 6],[6, 8],[8, 10]這5段，分別對(duì)應(yīng)值域的5個(gè)值。量子比例尺非常適合處理‘?dāng)?shù)值對(duì)應(yīng)顏色’的問題

閾值比例尺

閾值比例尺和量子比例尺類似，閾值比例尺是將連續(xù)的定義域映射到離散的值域里。

var threshold = d3.scaleThreshold().domain([0, 2, 4, 6, 8]).range(["a", "b", "c", "d", "e"]);
console.log(threshold(3)) //c
console.log(threshold.invertExtent("b")) // [0, 2]

量子和閾值十分相似，都是將連續(xù)的定義域映射到離散的值域里。

序數(shù)比例尺 序數(shù)比例尺

序數(shù)比例尺的定義域和值域都是離散的，通過輸入一些離散的值(如名稱，序號(hào)，ID號(hào)等)，要得到另一些離散的值(如顏色，頭銜等)，這時(shí)就要考慮序數(shù)比例尺。常用方法有:

var ordinal = d3. scaleOrdinal() - 創(chuàng)建一個(gè)序數(shù)比例尺.

ordinal(x) - 根據(jù)輸入值計(jì)算對(duì)應(yīng)的輸出值.

ordinal.domain([values]) - 設(shè)置輸入范圍.

ordinal.range([values]) - 設(shè)置輸出范圍.

ordinal.unknown([values]) - 設(shè)置未知輸入的輸出值.
大致的使用形式:

var ordinal = d3.scaleOrdinal().domain(["a", "b", "c", "d", "e"]).range([0, 2, 4, 6, 8]).unknown("超出輸入范圍");
console.log(ordinal("a")) // 0
console.log(ordinal("g")) // 超出輸入范圍
坐標(biāo)軸

坐標(biāo)軸組件可以將scales顯示為人類友好的刻度標(biāo)尺參考，減輕了在可視化中的視覺任務(wù)。坐標(biāo)軸相關(guān)的常用方法如下。
d3.axisLeft(linear) - 使用給定的 scale 構(gòu)建一個(gè)刻度在左的坐標(biāo)軸生成器

d3.axisBottom(linear) - 使用給定的 scale 構(gòu)建一個(gè)刻度在下的坐標(biāo)軸生成器

d3.axisRight(linear) - 使用給定的 scale 構(gòu)建一個(gè)刻度在右的坐標(biāo)軸生成器

d3.axisTop(linear) - 使用給定的 scale 構(gòu)建一個(gè)刻度在上的坐標(biāo)軸生成器

axis.ticks([argument...]) - 設(shè)定或獲取坐標(biāo)軸的分割數(shù)。

axis.tickValues([argument...]) - 指定 values 數(shù)組，則使用指定的數(shù)組作為刻度而不是自動(dòng)計(jì)算刻度

axis.tickPadding([padding]) - 設(shè)置刻度和刻度文本之間的間距

大致的使用形式:

var linear = d3.scaleLinear().domain([1000, 0]).rangeRound([0, 250])
var axisLeft = d3.axisLeft(linear).ticks(4);
var svg = d3.select("#axis").append("svg").attr("width", "400").attr("height", "300");
var gLeft = svg.append("g").attr("transform", "translate(40, 20)").call(axisLeft);

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/98952.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

  • 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

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

    摘要：如其中，和表示繪制區(qū)域的寬高，表示版本號(hào)。下面分別是繪制一個(gè)多邊形和折線路徑標(biāo)簽功能最豐富，以上圖形都可以使用路徑制作出來，用法與折線類似給出一個(gè)坐標(biāo)點(diǎn)在坐標(biāo)前添加一個(gè)英文字母，表示如何運(yùn)動(dòng)到此坐標(biāo)點(diǎn)點(diǎn)。英文字符按照功能分為五類。 在D3中會(huì)穿插SVG 方便大家對(duì)D3對(duì)使用 SVG簡(jiǎn)介 可縮放矢量圖(scalabel vector graphics)，是用于描述二維矢量圖形的一種圖形格...

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

  • 11個(gè)React Native 組件庫(kù)和 Javascript 數(shù)據(jù)可視化庫(kù)

    摘要：數(shù)據(jù)可視化庫(kù)超過的的可能是最流行和最廣泛的數(shù)據(jù)可視化庫(kù)。是一組組件，用于高效地渲染大型列表和表格數(shù)據(jù)。一種優(yōu)雅而靈活的方式，可以利用組件來支持實(shí)際的數(shù)據(jù)可視化。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ React Native 組件庫(kù) 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

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

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

0條評(píng)論

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