@antv/scale

  • Version 0.4.0
  • Published
  • 406 kB
  • 2 dependencies
  • MIT license

Install

npm i @antv/scale
yarn add @antv/scale
pnpm add @antv/scale

Overview

Toolkit for mapping abstract data into visual representation.

Index

Variables

variable d3Ticks

const d3Ticks: TickMethod<number>;

    variable DURATION_DAY

    const DURATION_DAY: number;

      variable DURATION_HOUR

      const DURATION_HOUR: number;

        variable DURATION_MINUTE

        const DURATION_MINUTE: number;

          variable DURATION_MONTH

          const DURATION_MONTH: number;

            variable DURATION_SECOND

            const DURATION_SECOND: number;

              variable DURATION_WEEK

              const DURATION_WEEK: number;

                variable DURATION_YEAR

                const DURATION_YEAR: number;

                  variable rPretty

                  const rPretty: TickMethod<number>;
                  • 创建分割点

                    Parameter min

                    左区间

                    Parameter max

                    右区间

                    Parameter n

                    分割点个数

                    Returns

                    计算后的 ticks

                    See Also

                    • R pretty https://svn.r-project.org/R/trunk/src/appl/pretty.c

                    • R pretty https://www.rdocumentation.org/packages/base/versions/3.5.2/topics/pretty

                  variable wilkinsonExtended

                  const wilkinsonExtended: TickMethod<number>;
                  • An Extension of Wilkinson's Algorithm for Position Tick Labels on Axes https://www.yuque.com/preview/yuque/0/2019/pdf/185317/1546999150858-45c3b9c2-4e86-4223-bf1a-8a732e8195ed.pdf

                    Parameter dMin

                    最小值

                    Parameter dMax

                    最大值

                    Parameter m

                    tick个数

                    Parameter onlyLoose

                    是否允许扩展min、max,不绝对强制,例如[3, 97]

                    Parameter Q

                    nice numbers集合

                    Parameter w

                    四个优化组件的权重

                  Classes

                  class Band

                  class Band<O extends BandOptions> extends Ordinal<O> {}
                  • Band 比例尺

                    一种特殊的 ordinal scale,区别在于值域的范围是连续的。 使用的场景例如柱状图,可以用来定位各个柱子水平方向距离原点开始绘制的距离、各柱子之间的间距

                    由于部分选项较为抽象,见下图描述:

                    PO = paddingOuter PI = paddingInner

                    domain = [A, B]

                    |<------------------------------------------- range ------------------------------------------->| | | | | | | | |<--step*PO-->|<----bandWidth---->|<--step*PI-->|<----bandWidth---->|<--step*PI-->|<--step*PO-->| | | ***************** | | ***************** | | | | | ******* A ******* | | ******* B ******* | | | | | ***************** | | ***************** | | | | |<--------------step------------->| | |-----------------------------------------------------------------------------------------------|

                    性能方便较 d3 快出 8 - 9 倍

                  constructor

                  constructor(options?: BandOptions);

                    method clone

                    clone: () => Band<O>;

                      method getBandWidth

                      getBandWidth: () => number;

                        method getDefaultOptions

                        protected getDefaultOptions: () => O;

                          method getPaddingInner

                          protected getPaddingInner: () => number;

                            method getPaddingOuter

                            protected getPaddingOuter: () => number;

                              method getRange

                              getRange: () => O['range'];

                                method getStep

                                getStep: () => number;

                                  method rescale

                                  protected rescale: () => void;

                                    class Base

                                    abstract class Base<O extends BaseOptions> {}

                                      constructor

                                      constructor(options?: BaseOptions<any, any>);
                                      • 构造函数,根据自定义的选项和默认选项生成当前选项

                                        Parameter options

                                        需要自定义配置的选项

                                      property options

                                      protected options: BaseOptions<any, any>;
                                      • 比例尺的选项,用于配置数据映射的规则和 ticks 的生成方式

                                      method clone

                                      abstract clone: () => Base<O>;
                                      • 克隆一个新的比例尺,可以用于更新选项

                                      method getDefaultOptions

                                      protected abstract getDefaultOptions: () => Partial<O>;
                                      • 子类需要覆盖的默认配置

                                      method getOptions

                                      getOptions: () => O;
                                      • 返回当前的所有选项

                                        Returns

                                        当前的所有选项

                                      method invert

                                      abstract invert: (x: Range<O>) => Domain<O> | Domain<O>[] | Unknown<O>;
                                      • 将值域里的一个值,据转换规则,逆向转换为定义域里的一个值或者一个区间

                                        Parameter x

                                        需要转换的值

                                      method map

                                      abstract map: (x: Domain<O>) => Range<O> | Unknown<O>;
                                      • 将定义域里面的一个值,根据转换规则,转换为值域的一个值。 如果该值不合法,则返回 options.unknown

                                        Parameter x

                                        需要转换的值

                                      method rescale

                                      protected rescale: (options?: Partial<O>) => void;
                                      • 根据需要更新 options 和更新后的 options 更新 scale 的内部状态, 在函数内部可以用 this.options 获得更新后的 options

                                        Parameter options

                                        需要更新的 options

                                      method update

                                      update: (updateOptions?: Partial<O>) => void;
                                      • 更新选项和比例尺的内部状态

                                        Parameter updateOptions

                                        需要更新的选项

                                      class Constant

                                      class Constant extends Base<ConstantOptions> {}

                                        method clone

                                        clone: () => Constant;
                                        • 克隆 Constant Scale

                                          Returns

                                          拥有相同选项且独立的 Constant Scale

                                        method getDefaultOptions

                                        protected getDefaultOptions: () => ConstantOptions;
                                        • 返回需要覆盖的默认选项

                                          Returns

                                          需要覆盖的默认选项

                                        method getTicks

                                        getTicks: () => number[];

                                          method invert

                                          invert: (x: Range<ConstantOptions>) => (string | number)[];
                                          • 如果 x 是该比例尺的常量(x === b),返回输入值的范围(即定义域),否者返回 []

                                            Parameter x

                                            输出值 (常量)

                                            Returns

                                            定义域

                                          method map

                                          map: (_: Domain<ConstantOptions>) => any;
                                          • 输入和输出满足:y = b,其中 b 是一个常量,是 options.range 的第一个元素

                                            Parameter _

                                            输入值

                                            Returns

                                            输出值(常量)

                                          class Identity

                                          class Identity extends Base<IdentityOptions> {}

                                            method clone

                                            clone: () => Identity;
                                            • 克隆 Identity Scale

                                              Returns

                                              拥有相同选项且独立的 Identity Scale

                                            method getDefaultOptions

                                            protected getDefaultOptions: () => IdentityOptions;
                                            • 返回需要覆盖的默认选项

                                              Returns

                                              需要覆盖的默认选项

                                            method getTicks

                                            getTicks: () => Range<IdentityOptions>[];
                                            • 根据比例尺的配置去生成 ticks,该 ticks 主要用于生成坐标轴

                                              Returns

                                              返回一个 ticks 的数组

                                            method invert

                                            invert: (x: Range<IdentityOptions>) => any;
                                            • map 的逆运算:x = y,在这里和 map 是相同方法

                                              Parameter x

                                              输出值

                                              Returns

                                              输入值

                                            method map

                                            map: (x: Domain<IdentityOptions>) => any;
                                            • 输入和输出满足:y = x

                                              Parameter x

                                              输入值

                                              Returns

                                              输出值

                                            class Linear

                                            class Linear extends Continuous<LinearOptions> {}
                                            • Linear 比例尺

                                              构造可创建一个在输入和输出之间具有线性关系的比例尺

                                            method chooseTransforms

                                            protected chooseTransforms: () => Transform[];

                                              method clone

                                              clone: () => Base<LinearOptions>;

                                                method getDefaultOptions

                                                protected getDefaultOptions: () => LinearOptions;

                                                  class Log

                                                  class Log extends Continuous<LogOptions> {}
                                                  • Linear 比例尺

                                                    构造一个线性的对数比例尺

                                                  method chooseNice

                                                  protected chooseNice: () => import('../types').TickMethod<number>;

                                                    method chooseTransforms

                                                    protected chooseTransforms: () => ((x: number) => number)[];

                                                      method clone

                                                      clone: () => Log;

                                                        method getDefaultOptions

                                                        protected getDefaultOptions: () => LogOptions;

                                                          method getTickMethodOptions

                                                          protected getTickMethodOptions: () => number[];

                                                            class Ordinal

                                                            class Ordinal<O extends OrdinalOptions> extends Base<O> {}
                                                            • Ordinal 比例尺

                                                              该比例尺具有离散的域和范围,例如将一组命名类别映射到一组颜色

                                                              - 使用 for 替代一些基于 map 的遍历,for 循环性能远高于 forEach, map - 阻止无意义的更新,只有到用户调用 map、invert 或者 update 之后才会进行相应的更新 - 两个 map 只初始化一次,在之后的更新中复用他们,这样我们避免了重复 new Map 带来的性能问题 在大量调用 update 函数场景下,较 d3-scale 效率有质的提高

                                                            constructor

                                                            constructor(options?: OrdinalOptions);

                                                              property sortedDomain

                                                              protected sortedDomain: (string | number)[];

                                                                method clone

                                                                clone: () => Ordinal<O>;

                                                                  method getDefaultOptions

                                                                  protected getDefaultOptions: () => O;

                                                                    method getDomain

                                                                    getDomain: () => O['domain'];

                                                                      method getRange

                                                                      protected getRange: () => (string | number)[];

                                                                        method invert

                                                                        invert: (y: Range<O>) => any;

                                                                          method map

                                                                          map: (x: Domain<O>) => any;

                                                                            method rescale

                                                                            protected rescale: (options?: Partial<O>) => void;

                                                                              class Point

                                                                              class Point extends Band<PointOptions & BandOptions> {}
                                                                              • Point 比例尺

                                                                                一种特殊的 band scale,它的 bandWidth 恒为 0。

                                                                                由于部分选项较为抽象,见下图描述:

                                                                                PO = Padding = PaddingInner domain = ["A", "B", "C"]

                                                                                |<------------------------------------------- range ------------------------------------------->| | | | | | |<--step*PO-->|<--------------step------------->|<--------------step------------->|<--step*PO-->| | | | | | | A B C | |-----------------------------------------------------------------------------------------------|

                                                                                性能方便较 d3 快出 8 - 9 倍

                                                                              constructor

                                                                              constructor(options?: PointOptions);

                                                                                method clone

                                                                                clone: () => Point;

                                                                                  method getDefaultOptions

                                                                                  protected getDefaultOptions: () => {
                                                                                  domain: any[];
                                                                                  range: number[];
                                                                                  align: number;
                                                                                  round: boolean;
                                                                                  padding: number;
                                                                                  unknown: any;
                                                                                  paddingInner: number;
                                                                                  paddingOuter: number;
                                                                                  };

                                                                                    method getPaddingInner

                                                                                    protected getPaddingInner: () => number;

                                                                                      method getPaddingOuter

                                                                                      protected getPaddingOuter: () => number;

                                                                                        method update

                                                                                        update: (options?: PointOptions) => void;

                                                                                          class Pow

                                                                                          class Pow<O extends PowOptions> extends Continuous<O> {}
                                                                                          • Pow 比例尺

                                                                                            类似于 linear scale, 不同之处在于在计算输出范围值之前对输入域值应用了指数变换,. 即 y = x ^ k 其中 k(指数)可以是任何实数。

                                                                                          constructor

                                                                                          constructor(options?: PowOptions);

                                                                                            method chooseTransforms

                                                                                            protected chooseTransforms: () => Transform[];

                                                                                              method clone

                                                                                              clone: () => Base<O>;

                                                                                                method getDefaultOptions

                                                                                                protected getDefaultOptions: () => O;

                                                                                                  class Quantile

                                                                                                  class Quantile extends Threshold<QuantileOptions> {}
                                                                                                  • 类似 Threshold 比例尺,区别在于分位数比例尺 (Quantile) 将一个离散的输入域映射到一个离散的输出域 输入域被指定为一组离散的样本值,输出域中的值的数量决定了分位数的数量。

                                                                                                  constructor

                                                                                                  constructor(options?: QuantileOptions);

                                                                                                    method clone

                                                                                                    clone: () => Quantile;

                                                                                                      method getDefaultOptions

                                                                                                      protected getDefaultOptions: () => QuantileOptions;

                                                                                                        method getDomain

                                                                                                        protected getDomain: () => number[];

                                                                                                          method getThresholds

                                                                                                          getThresholds: () => number[];

                                                                                                            method getTicks

                                                                                                            getTicks: () => number[];

                                                                                                              method invert

                                                                                                              invert: (y: Range<QuantileOptions>) => number[];
                                                                                                              • 如果是在第一段后或者最后一段就把两端的值添加上

                                                                                                              method rescale

                                                                                                              protected rescale: () => void;

                                                                                                                class Quantize

                                                                                                                class Quantize extends Threshold<QuantizeOptions> {}
                                                                                                                • 类似 Threshold 比例尺,区别在于 thresholds 是根据连续的 domain 根据离散的 range 的数量计算而得到的。

                                                                                                                constructor

                                                                                                                constructor(options?: QuantizeOptions);

                                                                                                                  method clone

                                                                                                                  clone: () => Quantize;

                                                                                                                    method getDefaultOptions

                                                                                                                    protected getDefaultOptions: () => QuantizeOptions;

                                                                                                                      method getDomain

                                                                                                                      protected getDomain: () => number[];

                                                                                                                        method getThresholds

                                                                                                                        getThresholds: () => number[];

                                                                                                                          method getTickMethodOptions

                                                                                                                          protected getTickMethodOptions: () => number[];

                                                                                                                            method getTicks

                                                                                                                            getTicks: () => number[];

                                                                                                                              method invert

                                                                                                                              invert: (y: Range<QuantizeOptions>) => number[];
                                                                                                                              • 如果是在第一段后或者最后一段就把两端的值添加上

                                                                                                                              method nice

                                                                                                                              protected nice: () => void;

                                                                                                                                method rescale

                                                                                                                                protected rescale: () => void;

                                                                                                                                  class Sqrt

                                                                                                                                  class Sqrt extends Pow<SqrtOptions & PowOptions> {}

                                                                                                                                    constructor

                                                                                                                                    constructor(options?: SqrtOptions);

                                                                                                                                      method clone

                                                                                                                                      clone: () => Sqrt;

                                                                                                                                        method getDefaultOptions

                                                                                                                                        protected getDefaultOptions: () => {
                                                                                                                                        domain: number[];
                                                                                                                                        range: number[];
                                                                                                                                        nice: boolean;
                                                                                                                                        clamp: boolean;
                                                                                                                                        round: boolean;
                                                                                                                                        interpolate: import('../types').Interpolate;
                                                                                                                                        tickMethod: import('../types').TickMethod<number>;
                                                                                                                                        tickCount: number;
                                                                                                                                        exponent: number;
                                                                                                                                        };

                                                                                                                                          method update

                                                                                                                                          update: (options?: SqrtOptions) => void;

                                                                                                                                            class Threshold

                                                                                                                                            class Threshold<O extends ThresholdOptions> extends Base<O> {}
                                                                                                                                            • 将连续的定义域分段,每一段所有的值对应离散的值域中一个值

                                                                                                                                            constructor

                                                                                                                                            constructor(options?: ThresholdOptions);

                                                                                                                                              property n

                                                                                                                                              protected n: number;
                                                                                                                                              • threshold 的数量

                                                                                                                                              method clone

                                                                                                                                              clone: () => Threshold<O>;

                                                                                                                                                method getDefaultOptions

                                                                                                                                                protected getDefaultOptions: () => O;

                                                                                                                                                  method getDomain

                                                                                                                                                  protected getDomain: () => number[];

                                                                                                                                                    method invert

                                                                                                                                                    invert: (y: Range<ThresholdOptions>) => number[];
                                                                                                                                                    • 在值域中找到对应的值,并返回在定义域中属于哪一段

                                                                                                                                                    method map

                                                                                                                                                    map: (x: Domain<ThresholdOptions>) => any;
                                                                                                                                                    • 二分查找到输入值在哪一段,返回对应的值域中的值

                                                                                                                                                    method rescale

                                                                                                                                                    protected rescale: () => void;

                                                                                                                                                      class Time

                                                                                                                                                      class Time extends Continuous<TimeOptions> {}

                                                                                                                                                        method chooseNice

                                                                                                                                                        protected chooseNice: () => import('../types').NiceMethod<Date>;

                                                                                                                                                          method chooseTransforms

                                                                                                                                                          protected chooseTransforms: () => (
                                                                                                                                                          | ((x: Date) => number)
                                                                                                                                                          | ((x: number) => Date)
                                                                                                                                                          )[];

                                                                                                                                                            method clone

                                                                                                                                                            clone: () => Time;

                                                                                                                                                              method getDefaultOptions

                                                                                                                                                              protected getDefaultOptions: () => TimeOptions;

                                                                                                                                                                method getFormatter

                                                                                                                                                                getFormatter: () => (d: Date) => string;

                                                                                                                                                                  method getTickMethodOptions

                                                                                                                                                                  protected getTickMethodOptions: () => (number | boolean | Date)[];

                                                                                                                                                                    Type Aliases

                                                                                                                                                                    type BandOptions

                                                                                                                                                                    type BandOptions = BaseOptions<number | string, number> & {
                                                                                                                                                                    /** 是否取整 */
                                                                                                                                                                    round?: boolean;
                                                                                                                                                                    /** 内部边距 */
                                                                                                                                                                    paddingInner?: number;
                                                                                                                                                                    /** 两侧边距 */
                                                                                                                                                                    paddingOuter?: number;
                                                                                                                                                                    /** 同时定义内部边距和两侧边距,如果该值大于 0,则 paddingInner 和 paddingOuter 无效 */
                                                                                                                                                                    padding?: number;
                                                                                                                                                                    /** 对齐,取值为 0 - 1 的整数,例如 0.5 表示居中 */
                                                                                                                                                                    align?: number;
                                                                                                                                                                    /** 比较器,用于对 domain 进行排序 */
                                                                                                                                                                    compare?: Comparator;
                                                                                                                                                                    };
                                                                                                                                                                    • 详细请参阅 scale/band.ts

                                                                                                                                                                    type BaseOptions

                                                                                                                                                                    type BaseOptions<D = any, R = D> = {
                                                                                                                                                                    /** 当需要映射的值不合法的时候,返回的值 */
                                                                                                                                                                    unknown?: any;
                                                                                                                                                                    /** 值域,默认为 [0, 1] */
                                                                                                                                                                    range?: R[];
                                                                                                                                                                    /** 定义域,默认为 [0, 1] */
                                                                                                                                                                    domain?: D[];
                                                                                                                                                                    };
                                                                                                                                                                    • 所有比例尺选项的默认类型 D:定义域元素的类型 R:值域元素的类型

                                                                                                                                                                    type Comparator

                                                                                                                                                                    type Comparator = (a: string | number, b: string | number) => number;
                                                                                                                                                                    • 比较器

                                                                                                                                                                    type ConstantOptions

                                                                                                                                                                    type ConstantOptions = BaseOptions<number | string> & TickOptions;
                                                                                                                                                                    • Constant 比例尺的选项

                                                                                                                                                                    type IdentityOptions

                                                                                                                                                                    type IdentityOptions = BaseOptions<number> & TickOptions;
                                                                                                                                                                    • Identity 比例尺的选项

                                                                                                                                                                    type Interpolate

                                                                                                                                                                    type Interpolate = (a: number, b: number) => (t: number) => number;
                                                                                                                                                                    • 插值器工厂

                                                                                                                                                                    type LinearOptions

                                                                                                                                                                    type LinearOptions = ContinuousOptions<number>;
                                                                                                                                                                    • Linear 比例尺的选项

                                                                                                                                                                    type LogOptions

                                                                                                                                                                    type LogOptions = ContinuousOptions<number> & {
                                                                                                                                                                    /** 底数 */
                                                                                                                                                                    base?: number;
                                                                                                                                                                    };
                                                                                                                                                                    • Log 比例尺的选项

                                                                                                                                                                    type OrdinalOptions

                                                                                                                                                                    type OrdinalOptions = BaseOptions<number | string> & {
                                                                                                                                                                    compare?: Comparator;
                                                                                                                                                                    };
                                                                                                                                                                    • OrdinalOptions 比例尺的选项

                                                                                                                                                                    type PointOptions

                                                                                                                                                                    type PointOptions = Omit<BandOptions, 'paddingInner' | 'paddingOuter'>;
                                                                                                                                                                    • Point 比例尺的选项

                                                                                                                                                                    type PowOptions

                                                                                                                                                                    type PowOptions = ContinuousOptions<number> & {
                                                                                                                                                                    /** 指数 */
                                                                                                                                                                    exponent?: number;
                                                                                                                                                                    };
                                                                                                                                                                    • Pow 比例尺的选项

                                                                                                                                                                    type QuantileOptions

                                                                                                                                                                    type QuantileOptions = ThresholdOptions & TickOptions;
                                                                                                                                                                    • Quantile 比例尺的选项

                                                                                                                                                                    type QuantizeOptions

                                                                                                                                                                    type QuantizeOptions = ThresholdOptions &
                                                                                                                                                                    TickOptions & {
                                                                                                                                                                    /** 是否需要 nice */
                                                                                                                                                                    nice?: boolean;
                                                                                                                                                                    };
                                                                                                                                                                    • Quantize 比例尺的选项

                                                                                                                                                                    type SqrtOptions

                                                                                                                                                                    type SqrtOptions = Omit<PowOptions, 'exponent'>;
                                                                                                                                                                    • Sqrt 比例尺的选项

                                                                                                                                                                    type ThresholdOptions

                                                                                                                                                                    type ThresholdOptions = BaseOptions<number, any>;
                                                                                                                                                                    • Threshold 比例尺的选项

                                                                                                                                                                    type TickMethod

                                                                                                                                                                    type TickMethod<T = number> = (min: T, max: T, n?: number, ...rest: any[]) => T[];
                                                                                                                                                                    • 获得 ticks 的方法

                                                                                                                                                                    type TimeOptions

                                                                                                                                                                    type TimeOptions = ContinuousOptions<Date, number> & {
                                                                                                                                                                    /** getTick 的时间间隔 */
                                                                                                                                                                    tickInterval?: number;
                                                                                                                                                                    /** 格式化的形式 */
                                                                                                                                                                    mask?: string;
                                                                                                                                                                    /** 是否是 utc 时间 */
                                                                                                                                                                    utc?: boolean;
                                                                                                                                                                    };
                                                                                                                                                                    • time 比例尺的选项

                                                                                                                                                                    Package Files (20)

                                                                                                                                                                    Dependencies (2)

                                                                                                                                                                    Dev Dependencies (28)

                                                                                                                                                                    Peer Dependencies (0)

                                                                                                                                                                    No peer dependencies.

                                                                                                                                                                    Badge

                                                                                                                                                                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@antv/scale.

                                                                                                                                                                    • Markdown
                                                                                                                                                                      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@antv/scale)
                                                                                                                                                                    • HTML
                                                                                                                                                                      <a href="https://www.jsdocs.io/package/@antv/scale"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>