d3-scale d3-scaleTime使用示例详解

目录

• 安装
• 使用
• API
• continuous(value)
• continuous.invert(value)
• continuous.domain([domain])
• continuous.range([range])
• continuous.rangeRound([range])
• continuous.clamp(clamp)
• continuous.unknown([value]
• continuous.interpolate(interpolate)
• continuous.ticks([count])
• continuous.tickFormat([count[, specifier]])
• continuous.nice([count])
• continuous.copy()
• d3.tickFormat(start, stop, count[, specifier])
• time.ticks([interval]) time.ticks([count])
• time.tickFormat([count[, specifier]]) time.tickFormat([interval[, specifier]])
• time.nice([count]) time.nice([interval])
• d3.scaleUtc([[domain, ]range])

安装

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使用示例详解的详细内容，更多关于d3-scale d3-scaleTime的资料请关注我们其它相关文章！