d3-scale和d3-scaleTime如何使用

這篇文章主要介紹“d3-scale和d3-scaleTime如何使用”，在日常操作中，相信很多人在d3-scale和d3-scaleTime如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”d3-scale和d3-scaleTime如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

安裝

npm install d3-scale

使用

import { scaleTime } from 'd3-scale';
var x = scaleTime()
    .domain([new Date(2000, 0, 1, 0), new Date(2000, 0, 1, 2)]);

API

連續(xù)標(biāo)度將一個連續(xù)的、定量的輸入域映射到一個連續(xù)的輸出范圍。如果范圍也是數(shù)字的，那么映射可能是倒置的。不能直接構(gòu)建一個連續(xù)標(biāo)度，而是要嘗試線性、功率、對數(shù)、特性、徑向、時間或順序色標(biāo)。

continuous(value)

給定domain中的一個值，返回range中的相應(yīng)值。如果給定的值在domain域之外，并且沒有啟用clamping功能，那么映射可能會被推斷，從而使返回的值在范圍之外。

例如，要應(yīng)用一個位置編碼:

var x = d3.scaleLinear()
    .domain([10, 130])
    .range([0, 960]);
x(20); // 80
x(50); // 320

或者應(yīng)用顏色編碼:

var color = d3.scaleLinear()
    .domain([10, 100])
    .range(["brown", "steelblue"]);
color(20); // "#9a3439"
color(50); // "#7b5167"

continuous.invert(value)

給定range內(nèi)的一個值，返回domain內(nèi)的相應(yīng)值。反轉(zhuǎn)對于交互很有用，比如說確定與鼠標(biāo)位置對應(yīng)的數(shù)據(jù)值。

例如，要反轉(zhuǎn)一個位置編碼:

var x = d3.scaleLinear()
    .domain([10, 130])
    .range([0, 960]);
x.invert(80); // 20
x.invert(320); // 50

如果給定的值在range之外，并且沒有啟用clamping功能，值對應(yīng)的映射結(jié)果可能會被外推，從而使返回的值在域外。只有當(dāng)范圍是數(shù)字時才支持這個方法。如果范圍不是數(shù)字，則返回NaN。

對于范圍內(nèi)的有效值y，continuous(continuous.invert(y))近似等于y；同樣，對于域內(nèi)的有效值x，continuous.invert(continuous(x))近似等于x。由于浮點(diǎn)精度的限制，比例及其逆向可能不準(zhǔn)確。

continuous.domain([domain])

如果指定了domain，則將比例尺的域設(shè)置為指定的數(shù)字?jǐn)?shù)組。該數(shù)組必須包含兩個或更多的元素。如果給定數(shù)組中的元素不是數(shù)字，它們將被強(qiáng)制變成數(shù)字。如果沒有指定domain，返回比例尺當(dāng)前domain的副本。

盡管連續(xù)色階在其域和范圍內(nèi)通常有兩個值，但指定兩個以上的值會產(chǎn)生一個分片色階。

例如，要創(chuàng)建一個分歧色標(biāo)，在負(fù)值的白色和紅色之間插值，在正值的白色和綠色之間插值:

var color = d3.scaleLinear()
    .domain([-1, 0, 1])
    .range(["red", "white", "green"]);
color(-0.5); // "rgb(255, 128, 128)"
color(+0.5); // "rgb(128, 192, 128)"

在內(nèi)部，分片比例尺對與給定域值對應(yīng)的范圍插值器進(jìn)行二進(jìn)制搜索。因此，域必須按升序或降序排列。如果域和范圍有不同的長度N和M，則只會去取*min(N,M)*個元素進(jìn)行展示。

continuous.range([range])

如果指定了range，則將比例尺的范圍設(shè)置為指定的數(shù)值數(shù)組。該數(shù)組必須包含兩個或更多的元素。與域不同，給定數(shù)組中的元素不需要是數(shù)字；底層插值器支持的任何值都可以工作，但注意數(shù)字范圍對invert是必需的。如果沒有指定范圍，則返回刻度的當(dāng)前范圍的副本。參見continuous.interpolate獲取更多的例子。

continuous.rangeRound([range])

將刻度尺的范圍設(shè)置為指定的數(shù)值數(shù)組，同時將刻度尺的插值器設(shè)置為interpolateRound。 這是一個方便的方法，相當(dāng)于:

continuous
    .range(range)
    .interpolate(d3.interpolateRound);

四舍五入插值器有時對避免抗鋸齒偽影很有用，不過也可以考慮形狀渲染的 "crispEdges "樣式。注意，這個插值器只能用于數(shù)字范圍。

continuous.clamp(clamp)

如果指定了clamp，則相應(yīng)地啟用或禁用clamp。如果clamping功能被禁用，并且比例尺被傳遞了一個domain之外的值，那么比例尺可能通過外推法返回一個域外的值。如果clamping功能被啟用，刻度的返回值總是在刻度的范圍內(nèi)。

clamping常用于continuous.invert。例如：

var x = d3.scaleLinear()
    .domain([10, 130])
    .range([0, 960]);
x(-10); // -160, outside range
x.invert(-160); // -10, outside domain
x.clamp(true);
x(-10); // 0, clamped to range
x.invert(-160); // 10, clamped to domain

continuous.unknown([value]

如果指定value，為未定義（或NaN）的輸入值設(shè)置刻度的輸出值，并返回這個刻度。如果沒有指定value，返回當(dāng)前的未知值，默認(rèn)為未定義。

continuous.interpolate(interpolate)

如果指定了interpolate，則設(shè)置比例尺的范圍插值器工廠。這個插值器工廠用于為范圍中每一對相鄰的值創(chuàng)建插值器；然后這些插值器將[0, 1]中的標(biāo)準(zhǔn)化域參數(shù)t映射到范圍中的相應(yīng)值。如果沒有指定factory，則返回比例尺當(dāng)前的插值器工廠，默認(rèn)為d3.interpolate。參見d3-interpolate以了解更多的插值器。

例如，考慮一個有三種顏色范圍的發(fā)散色標(biāo)。

var color = d3.scaleLinear()
    .domain([-100, 0, +100])
    .range(["red", "white", "green"]);

在刻度內(nèi)部創(chuàng)建兩個插值器，相當(dāng)于：

var i0 = d3.interpolate("red", "white"),
    i1 = d3.interpolate("white", "green");

指定自定義插值器的一個常見原因是要改變插值的顏色空間。例如，要使用HCL。

var color = d3.scaleLinear()
    .domain([10, 100])
    .range(["brown", "steelblue"])
    .interpolate(d3.interpolateHcl);

或者為Cubehelix提供一個自定義的伽瑪。

var color = d3.scaleLinear()
    .domain([10, 100])
    .range(["brown", "steelblue"])
    .interpolate(d3.interpolateCubehelix.gamma(3));

注意：默認(rèn)的內(nèi)插器可以重復(fù)使用返回值。例如，如果范圍值是對象，那么值插值器總是返回相同的對象，在原地修改它。如果范圍用于設(shè)置屬性或樣式，這通常是可以接受的（為了性能也是可取的）；但是，如果你需要存儲范圍的返回值，你必須指定你自己的內(nèi)插器或根據(jù)情況進(jìn)行復(fù)制。

continuous.ticks([count])

返回比例尺domain中大約有多少個代表性的值。如果沒有指定count，默認(rèn)為10。返回的刻度值間隔均勻，具有人類可讀的數(shù)值（比如10的倍數(shù)），并且保證在域的范圍內(nèi)。ticks通常與可視化的數(shù)據(jù)結(jié)合在一起，用來顯示參考線，或tick標(biāo)記。指定的count只是一個預(yù)估值；根據(jù)域的不同，刻度可能會返回更多或更少的值。參見d3-array的ticks。

continuous.tickFormat([count[, specifier]])

返回一個適合顯示tick值的數(shù)字格式函數(shù)，根據(jù)tick值之間的固定間隔自動計算適當(dāng)?shù)木?。指定的計?shù)應(yīng)與用于生成刻度值的計數(shù)相同。

一個可選的指定符允許自定義格式，其中格式的精度由刻度自動設(shè)置為適合刻度間隔。例如，為了格式化百分比變化，你可以寫成：

var x = d3.scaleLinear()
    .domain([-1, 1])
    .range([0, 960]);
var ticks = x.ticks(5),
    tickFormat = x.tickFormat(5, "+%");
ticks.map(tickFormat); // ["-100%", "-50%", "+0%", "+50%", "+100%"]

如果指定者使用了格式類型s，刻度將返回一個基于域中最大值的SI-前綴的格式。如果指定者已經(jīng)指定了一個精度，這個方法就等同于locale.format。參見d3.tickFormat。

continuous.nice([count])

擴(kuò)展域，使其開始和結(jié)束于漂亮的整數(shù)值。這個方法通常會修改刻度的域，并且只能將邊界擴(kuò)展到最近的整數(shù)值。一個可選的tick count參數(shù)允許對用于擴(kuò)展邊界的步長進(jìn)行更大的控制，保證返回的tick將完全覆蓋域。如果域是由數(shù)據(jù)計算出來的，比如說使用程度，并且可能是不規(guī)則的，那么Nicing就很有用。例如，對于一個[0.201479..., 0.996679...]的域，一個好的域可能是[0.2, 1.0]。如果域有兩個以上的值，對域的劃分只影響到第一個和最后一個值。也請參見d3-array的tickStep。

擴(kuò)展一個比例尺只影響當(dāng)前的域；它不會自動美化隨后使用continuous.domain設(shè)置的域。如果需要的話，你必須在設(shè)置新域后重新對比例尺進(jìn)行修飾。

continuous.copy()

返回該比例尺的精確拷貝。對這個比例尺的改變不會影響返回的比例尺，反之亦然。

d3.tickFormat(start, stop, count[, specifier])

返回一個適合顯示tick值的數(shù)字格式函數(shù)，根據(jù)d3.tickStep確定的tick值之間的固定間隔，自動計算適當(dāng)?shù)木取?/p>

一個可選的指定符允許自定義格式，其中格式的精度由刻度自動設(shè)置為適合刻度間隔。例如，為了格式化百分比變化，你可以寫成：

var tickFormat = d3.tickFormat(-1, 1, 5, "+%");
tickFormat(-0.5); // "-50%"

如果指定者使用格式類型s，刻度將返回一個基于start和stop的較大絕對值的SI-prefix格式。如果指定者已經(jīng)指定了一個精度，這個方法就等同于locale.format。

time.ticks([interval]) time.ticks([count])

返回刻度域中的代表性日期。返回的刻度值是均勻間隔的（大部分），有合理的值（比如每天的午夜），并且保證在域的范圍內(nèi)。ticks通常與可視化的數(shù)據(jù)結(jié)合在一起，用來顯示參考線，或tick標(biāo)記。

可以指定一個可選的count，以影響生成多少個ticks。如果沒有指定count，默認(rèn)為10。指定的計數(shù)只是一個參考值；根據(jù)領(lǐng)域的不同，刻度可能返回更多或更少的值。例如，要創(chuàng)建10個默認(rèn)的刻度線：

var x = d3.scaleTime();
x.ticks(10);
// [Sat Jan 01 2000 00:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 03:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 06:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 09:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 12:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 15:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 18:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 21:00:00 GMT-0800 (PST),
//  Sun Jan 02 2000 00:00:00 GMT-0800 (PST)]
// 設(shè)置了10個 但只返回了9個

以下時間間隔被認(rèn)為是默認(rèn)的時間間隔：

• 1-, 5-, 15- and 30-minute.

• 1-, 3-, 6- and 12-hour.

• 1- and 2-day.

• 1-week.

• 1- and 3-month.

• 1-year.

為了代替計數(shù)，可以明確指定一個時間間隔。要修剪給定時間間隔生成的ticks，使用interval.every。

例如，制定15分鐘的時間間隔生成ticks：

var x = d3.scaleTime()
    .domain([new Date(2000, 0, 1, 0), new Date(2000, 0, 1, 2)]);
x.ticks(d3.timeMinute.every(15));
// [Sat Jan 01 2000 00:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 00:15:00 GMT-0800 (PST),
//  Sat Jan 01 2000 00:30:00 GMT-0800 (PST),
//  Sat Jan 01 2000 00:45:00 GMT-0800 (PST),
//  Sat Jan 01 2000 01:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 01:15:00 GMT-0800 (PST),
//  Sat Jan 01 2000 01:30:00 GMT-0800 (PST),
//  Sat Jan 01 2000 01:45:00 GMT-0800 (PST),
//  Sat Jan 01 2000 02:00:00 GMT-0800 (PST)]

或者，向interval.filter傳遞一個取值函數(shù)：

x.ticks(d3.timeMinute.filter(function(d) {
  return d.getMinutes() % 15 === 0;
}));

注意：在某些情況下，比如說，對于日標(biāo)，指定一個步驟會導(dǎo)致標(biāo)點(diǎn)的不規(guī)則間隔，因?yàn)闀r間間隔有不同的長度。

time.tickFormat([count[, specifier]]) time.tickFormat([interval[, specifier]])

返回一個適合顯示tick值的時間格式函數(shù)。指定的計數(shù)或時間間隔目前被忽略，但為了與其他尺度（如continuous.tickFormat）保持一致會被接受。如果指定了一個格式指定符，這個方法等同于format。如果沒有指定指定器，將返回默認(rèn)的時間格式。 默認(rèn)的多尺度時間格式在指定的日期基礎(chǔ)上選擇一個人類可讀的表示方法，如下:

• %Y--代表年份界限，如2011年。

• %B - 以月為界，如二月。

• %b %d - 以周為界，如2月6日。

• %a %d - 以日為界，如周一07。

• %I %p - 以小時為界，如01 AM。

• %I:%M - 以分鐘為界限，如01:23。

• :%S - 以秒為界限，如:45。

• .%L--表示所有其他時間的毫秒數(shù)，如0.012。

雖然有些不尋常，但這種默認(rèn)行為的好處是提供了本地和全局的背景：例如，將一串刻度線格式化為[11 PM, Mon 07, 01 AM]，可以同時顯示小時、日期和日期的信息，而不是只顯示小時[11 PM, 12 AM, 01 AM]。如果你想推出你自己的條件性時間格式，請參見d3-Time-format。

time.nice([count]) time.nice([interval])

擴(kuò)展域，使其開始和結(jié)束于漂亮的整數(shù)值。這個方法通常會修改刻度的域，并且可能只將邊界擴(kuò)展到最近的圓值。參見continuous.nice了解更多。

一個可選的刻度線參數(shù)允許對用于擴(kuò)展邊界的步長進(jìn)行更大的控制，保證返回的刻度線將完全覆蓋該域。另外，也可以指定一個時間間隔來明確地設(shè)置刻度。如果指定了一個時間間隔，也可以指定一個可選的步長，以跳過一些刻度。例如，time.nice(d3.timeSecond.every(10))將擴(kuò)展域到偶數(shù)的10秒（0、10、20等）。更多細(xì)節(jié)見time.ticks和interval.every。

d3.scaleUtc([[domain, ]range])

相當(dāng)于scaleTime，但返回的時間刻度是以協(xié)調(diào)世界時(UTC)而非本地時間運(yùn)行的。

到此，關(guān)于“d3-scale和d3-scaleTime如何使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！