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

huhud 發布于2019-08-02 11:54 / 3208人閱讀

摘要：設置為，則所有超出值域范圍的值，都會被收縮到值域之內。指數比例尺相對線性比例尺多出一個用于指定指數。這段代碼中相當于定義一個線性比例尺。使用量子比例尺后定義域將被分成這段，分別對應值域的個值。

線性比例尺

線性比例尺是常用比例尺常用方法有：

var linear = d3.scaleLinear() - 創建一個定量的線性比例尺.

linear.domain([numbers]) - 定義或獲取定義域

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

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

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

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

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

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

linear.ticks([count]) - 設定或獲取坐標軸刻度

大致的使用形式:

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]

指數，量子，閾值比例尺

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

指數比例尺

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

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

指數為3，輸入為2。這段代碼中相當于定義一個線性比例尺。定義域為[0, 27], 值域為[0, 90]，當計算2的3次方得到的結果為8，在對這個結果應用線性比例尺，最終到27，驗證著一點，請看如下代碼：

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

量子比例尺

量子比例尺定義域是連續的。值域是離散的，結果是對應的離散值。

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

使用量子比例尺后定義域將被分成[0, 2],[2, 4],[4, 6],[6, 8],[8, 10]這5段，分別對應值域的5個值。量子比例尺非常適合處理‘數值對應顏色’的問題

閾值比例尺

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

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]

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

序數比例尺 序數比例尺

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

var ordinal = d3. scaleOrdinal() - 創建一個序數比例尺.

ordinal(x) - 根據輸入值計算對應的輸出值.

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

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

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

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")) // 超出輸入范圍

坐標軸

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

d3.axisBottom(linear) - 使用給定的 scale 構建一個刻度在下的坐標軸生成器

d3.axisRight(linear) - 使用給定的 scale 構建一個刻度在右的坐標軸生成器

d3.axisTop(linear) - 使用給定的 scale 構建一個刻度在上的坐標軸生成器

axis.ticks([argument...]) - 設定或獲取坐標軸的分割數。

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

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

大致的使用形式:

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);

云服務器 GPU云服務器 d3.js數據可視化實戰大數據可視化 d3.js d3.js數據可視化實戰手冊交互式數據可視化

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

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

交互式數據可視化－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.js（一）

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

MASAILA 2019-08-20 10:39 評論0 收藏0
11個React Native 組件庫和 Javascript 數據可視化庫

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

tangr206 2019-08-23 17:11 評論0 收藏0