概述

pow（幂比例尺）是一种连续型比例尺，类似于线性比例尺。pow比例尺会对输入数据先进行指数级运算然后再映射到输出范围。其映射公式为：y = x ^ k

其中 k 是指数（exponent）参数，可以是任何实数。当 k = 1 时，pow比例尺即为linear（线性）比例尺。

pow比例尺特别适用于需要强调数据间相对差异的场景，例如：

• 当数据分布呈现指数增长/衰减特征时
• 需要放大/缩小数据间差异时
• 数据范围很大但希望更均匀地展示时

配置项

| 属性 | 描述 | 类型 | 默认值 | 必选 | | ----------- | -------------------------------- | ----------------------------------------------------------------------------------------- | ---------------------------- | ---- | --- | | type | 比例尺类型，需为'pow' | string | 无 | ✓ | | | domain | 定义域，表示输入数据的原始范围 | (number | string)[] | [0, 1] | | | range | 值域，表示映射后的视觉范围 | number[] | [0, 1] | | | exponent | 指数值，决定指数变换的强度 | number | 2 | | | nice | 是否需要对定义域的范围进行优化 | boolean | false | | | clamp | 是否将超出定义域的值限制在范围内 | boolean | false | | | round | 是否对输出值进行四舍五入 | boolean | false | | | tickMethod | 计算刻度方法 | (min: number, max: number, count: number) => number[] | d3Ticks | | | tickCount | 刻度数量 | number | 5 | | | interpolate | 自定义插值器，支持数字和颜色值 | (a: number | string, b: number | string) => (t: number) => number | string | 数字:线性插值;颜色:RGBA 插值 |

注意事项

• 当 domain 包含负值时，exponent 必须为整数，否则会产生复数结果
• 过大的 exponent 值可能导致小值之间的差异被过度压缩
• 当 exponent=1 时，考虑使用 linear 比例尺以获得更好性能
• tickMethod 默认使用 d3.js 的 d3Ticks 算法，它会自动生成美观易读的刻度值（如 0,5,10 而不是 0,3.33,6.66,10）
• 当需要映射的值不合法的时候，返回unknown
• interpolate接收两个参数(a,b)表示值域范围(数字或颜色)，返回一个插值函数(t => value)，其中 t∈[0,1]表示插值比例。默认实现会根据输入类型自动选择：数字：使用线性插值 y = a*(1-t) + b*t；颜色：生成一个 rgba 颜色值

示例

线性比例尺 (exponent=1)

当 exponent=1 时，pow 比例尺等同于线性比例尺。此时数据映射是线性的，适合展示均匀分布的数据。

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {
  const data = [
    { month: '1月', sales: 0.1 },
    { month: '2月', sales: 0.2 },
    { month: '3月', sales: 0.3 },
    { month: '4月', sales: 0.4 },
    { month: '5月', sales: 0.5 },
  ];

  const config ={
    "scale": {
      "y": {
        "type": "pow",
        "domain": [0, 0.5],
        "range": [0, 1],
        "exponent": 1
      }
    },
    "yField": "sales",
    "xField": "month",
    "data": data
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

平方根比例尺 (exponent=0.5)

当数据范围很大时，可以使用 exponent < 1 的 pow 比例尺压缩数据差异。平方根比例尺适合展示数据范围大但希望更均匀分布的情况。

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {
  const data = [
    { city: '北京', population: 2171 },
    { city: '上海', population: 2418 },
    { city: '广州', population: 1490 },
    { city: '深圳', population: 1303 },
    { city: '杭州', population: 1000 },
    { city: '成都', population: 800 },
    { city: '天津', population: 600 },
  ];

  const config ={
    "scale": "x",
    "yField": "population",
    "xField": "city",
    "data": data
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

指数比例尺 (exponent=2)

当需要强调小值间的差异时，可以使用 exponent > 1 的 pow 比例尺。指数比例尺会放大小值间的差异，适合展示细微但重要的变化。

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {
  const data = [
    { day: '周一', rate: 0.01 },
    { day: '周二', rate: 0.02 },
    { day: '周三', rate: 0.05 },
    { day: '周四', rate: 0.1 },
    { day: '周五', rate: 0.2 },
  ];

  const config ={
    "scale": {
      "y": {
        "type": "pow",
        "domain": [0, 0.2],
        "range": [1, 0],
        "exponent": 2
      }
    },
    "yField": "rate",
    "xField": "day",
    "data": data
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

自定义插值函数

import { Line } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {
  const data = [
    { time: '2025-01', value: 0.1 },
    { time: '2025-02', value: 0.4 },
    { time: '2025-03', value: 0.9 },
  ];

  const config ={
    "scale": {
      "y": {
        "type": "pow",
        "domain": [0, 1],
        "range": [0, 1],
        "exponent": 1,
        "interpolate": (a, b) => (t) => a + (b - a) * t * t
      }
    },
    "yField": "value",
    "xField": "time",
    "data": data
  };

  return <Line {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);