d3-scale和d3-scaleTime如何使用

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

安裝

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

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

continuous(value)

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

例如，要應用一個位置編碼:

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

或者應用顏色編碼:

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

continuous.invert(value)

給定range內的一個值，返回domain內的相應值。反轉對于交互很有用，比如說確定與鼠標位置對應的數據值。

例如，要反轉一個位置編碼:

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

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

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

continuous.domain([domain])

如果指定了domain，則將比例尺的域設置為指定的數字數組。該數組必須包含兩個或更多的元素。如果給定數組中的元素不是數字，它們將被強制變成數字。如果沒有指定domain，返回比例尺當前domain的副本。

盡管連續色階在其域和范圍內通常有兩個值，但指定兩個以上的值會產生一個分片色階。

例如，要創建一個分歧色標，在負值的白色和紅色之間插值，在正值的白色和綠色之間插值:

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和M，則只會去取*min(N,M)*個元素進行展示。

continuous.range([range])

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

continuous.rangeRound([range])

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

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

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

continuous.clamp(clamp)

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

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）的輸入值設置刻度的輸出值，并返回這個刻度。如果沒有指定value，返回當前的未知值，默認為未定義。

continuous.interpolate(interpolate)

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

例如，考慮一個有三種顏色范圍的發散色標。

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

在刻度內部創建兩個插值器，相當于：

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

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

continuous.ticks([count])

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

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

返回一個適合顯示tick值的數字格式函數，根據tick值之間的固定間隔自動計算適當的精度。指定的計數應與用于生成刻度值的計數相同。

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

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-前綴的格式。如果指定者已經指定了一個精度，這個方法就等同于locale.format。參見d3.tickFormat。

continuous.nice([count])

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

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

continuous.copy()

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

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

返回一個適合顯示tick值的數字格式函數，根據d3.tickStep確定的tick值之間的固定間隔，自動計算適當的精度。

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

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

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

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

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

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

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)]
// 設置了10個 但只返回了9個

以下時間間隔被認為是默認的時間間隔：

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

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

• 1- and 2-day.

• 1-week.

• 1- and 3-month.

• 1-year.

為了代替計數，可以明確指定一個時間間隔。要修剪給定時間間隔生成的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傳遞一個取值函數：

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

注意：在某些情況下，比如說，對于日標，指定一個步驟會導致標點的不規則間隔，因為時間間隔有不同的長度。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相當于scaleTime，但返回的時間刻度是以協調世界時(UTC)而非本地時間運行的。

到此，關于“d3-scale和d3-scaleTime如何使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！