pow

概述

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 { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

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 },
];

chart.options({
  type: 'interval',
  data,
  encode: { x: 'month', y: 'sales' },
  scale: {
    y: {
      type: 'pow',
      domain: [0, 0.5], // 输入范围
      range: [0, 1], // 输出范围，[0, 1]表示y轴方向从上到下，[1, 0]表示y轴方向从下到上
      exponent: 1,
    },
  },
});

chart.render();

平方根比例尺 (exponent=0.5)

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

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

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

chart.options({
  type: 'interval',
  data,
  encode: { x: 'city', y: 'population' },
  scale: {
    y: {
      type: 'pow',
      exponent: 0.5,
      nice: true,
    },
  },
});

chart.render();

指数比例尺 (exponent=2)

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

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

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

chart.options({
  type: 'interval',
  data,
  encode: { x: 'day', y: 'rate' },
  scale: {
    y: {
      type: 'pow',
      domain: [0, 0.2], // 输入范围
      range: [1, 0], // 输出范围，[0, 1]表示y轴方向从上到下，[1, 0]表示y轴方向从下到上
      exponent: 2,
    },
  },
});

chart.render();

自定义插值函数

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

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

chart.options({
  type: 'line',
  data,
  encode: { x: 'time', y: 'value' },
  scale: {
    y: {
      type: 'pow',
      domain: [0, 1],
      range: [0, 1],
      exponent: 1,
      interpolate: (a, b) => (t) => a + (b - a) * t * t, // 二次缓动插值
    },
  },
});

chart.render();