From fdc2172635ef1c2aaf12755fc627d7ae784dfa6b Mon Sep 17 00:00:00 2001 From: kun6696 <143773015+kun6696@users.noreply.github.com> Date: Wed, 6 Dec 2023 17:16:25 +0800 Subject: [PATCH] feat: add jitterY (#5887) * fix(Transform): add jitterY param * docs(Transform): add jitterY.md --------- Co-authored-by: xionghe.hx --- .../snapshots/static/cars2PointJitterX.svg | 6073 +++++++++++++++++ .../snapshots/static/cars2PointJitterY.svg | 1213 ++-- __tests__/plots/static/cars2-point-jitterX.ts | 23 + __tests__/plots/static/cars2-point-jitterY.ts | 8 +- __tests__/plots/static/index.ts | 1 + __tests__/unit/lib/core.spec.ts | 2 + __tests__/unit/lib/std.spec.ts | 2 + site/docs/spec/overview.zh.md | 1 + site/docs/spec/transform/jitterY.en.md | 6 + site/docs/spec/transform/jitterY.zh.md | 42 + src/lib/core.ts | 2 + src/spec/transform.ts | 8 + src/transform/index.ts | 2 + src/transform/jitterY.ts | 30 + 14 files changed, 6802 insertions(+), 611 deletions(-) create mode 100644 __tests__/integration/snapshots/static/cars2PointJitterX.svg create mode 100644 __tests__/plots/static/cars2-point-jitterX.ts create mode 100644 site/docs/spec/transform/jitterY.en.md create mode 100644 site/docs/spec/transform/jitterY.zh.md create mode 100644 src/transform/jitterY.ts diff --git a/__tests__/integration/snapshots/static/cars2PointJitterX.svg b/__tests__/integration/snapshots/static/cars2PointJitterX.svg new file mode 100644 index 0000000000..129394231e --- /dev/null +++ b/__tests__/integration/snapshots/static/cars2PointJitterX.svg @@ -0,0 +1,6073 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 8 + + + + + + + + + + + + + + + + + + + + 4 + + + + + + + + + + + + + + + + + + + + 6 + + + + + + + + + + + + + + + + + + + + 3 + + + + + + + + + + + + + + + + + + + + 5 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 3 + + + + + + + 4 + + + + + + + 5 + + + + + + + 6 + + + + + + + 8 + + + + + + + + + Cylinders + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 50 + + + + + + + 100 + + + + + + + 150 + + + + + + + 200 + + + + + + + + + Horsepower + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/static/cars2PointJitterY.svg b/__tests__/integration/snapshots/static/cars2PointJitterY.svg index 129394231e..99e5eac95b 100644 --- a/__tests__/integration/snapshots/static/cars2PointJitterY.svg +++ b/__tests__/integration/snapshots/static/cars2PointJitterY.svg @@ -33,23 +33,23 @@ height="448" /> - + - + @@ -565,26 +565,95 @@ fill="none" transform="matrix(1,0,0,1,0,0)" class="axis-grid-group" - /> + > + + + + + + + + + + + + + + + + + + - + - - - - - - 3 - - - - - - - 4 + 50 - 5 + 100 - 6 + 150 - 8 + 200 - Cylinders + Horsepower @@ -896,101 +915,32 @@ class="component" > - - - - - - - - - - - - - - - - - - + /> - + + + + + + + + + 3 + + + + @@ -1125,14 +1124,14 @@ opacity="0.45" visibility="visible" > - 50 + 4 @@ -1153,14 +1152,14 @@ opacity="0.45" visibility="visible" > - 100 + 5 @@ -1181,14 +1180,14 @@ opacity="0.45" visibility="visible" > - 150 + 6 @@ -1209,7 +1208,7 @@ opacity="0.45" visibility="visible" > - 200 + 8 @@ -1218,7 +1217,7 @@ @@ -1238,19 +1237,19 @@ class="axis-title" opacity="0.9" > - Horsepower + Cylinders - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + { 'transform.dodgeX': DodgeX, 'transform.jitter': Jitter, 'transform.jitterX': JitterX, + 'transform.jitterY': JitterY, 'transform.symmetryY': SymmetryY, 'transform.diffY': DiffY, 'transform.stackEnter': StackEnter, diff --git a/__tests__/unit/lib/std.spec.ts b/__tests__/unit/lib/std.spec.ts index d816d17cc6..8546a82ac7 100644 --- a/__tests__/unit/lib/std.spec.ts +++ b/__tests__/unit/lib/std.spec.ts @@ -129,6 +129,7 @@ import { NormalizeY, Jitter, JitterX, + JitterY, SymmetryY, DiffY, Select, @@ -200,6 +201,7 @@ describe('stdlib', () => { 'transform.dodgeX': DodgeX, 'transform.jitter': Jitter, 'transform.jitterX': JitterX, + 'transform.jitterY': JitterY, 'transform.symmetryY': SymmetryY, 'transform.diffY': DiffY, 'transform.stackEnter': StackEnter, diff --git a/site/docs/spec/overview.zh.md b/site/docs/spec/overview.zh.md index dca1379805..35d359d4d4 100644 --- a/site/docs/spec/overview.zh.md +++ b/site/docs/spec/overview.zh.md @@ -69,6 +69,7 @@ G2 是一个简洁的、渐进式的可视化语法。文档将按照下面的 - [groupY](/spec/transform/group-y) - 对离散的 y 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。 - [jitter](/spec/transform/jitter) - 根据离散的 x 和 离散的 y 比例尺，生成 dy 和 dx 通道，实现在某个区域散开的效果。 - [jitterX](/spec/transform/jitter-x) - 根据离散的 x 比例尺，生成 dx 通道，实现在某个区域的 x 方向散开的效果。 +- [jitterY](/spec/transform/jitter-y) - 根据离散的 y 比例尺，生成 dy 通道，实现在某个区域的 y 方向散开的效果。 - [normalizeY](/spec/transform/normalize-y) - 对 y 和 y1 通道根据指定的 basis 进行归一化处理。 - [select](/spec/transform/select) - 按照指定通道进行分组，根据指定通道和 selector 从每组选择出数据。 - [selectX](/spec/transform/select-x) - 按照指定通道进行分组，根据 x 通道和 selector 从每组选择出数据。 diff --git a/site/docs/spec/transform/jitterY.en.md b/site/docs/spec/transform/jitterY.en.md new file mode 100644 index 0000000000..6a1b1cab85 --- /dev/null +++ b/site/docs/spec/transform/jitterY.en.md @@ -0,0 +1,6 @@ +--- +title: jitterY +order: 1 +--- + + diff --git a/site/docs/spec/transform/jitterY.zh.md b/site/docs/spec/transform/jitterY.zh.md new file mode 100644 index 0000000000..9b310a14ad --- /dev/null +++ b/site/docs/spec/transform/jitterY.zh.md @@ -0,0 +1,42 @@ +--- +title: jitterY +order: 1 +--- + +根据离散的 y 比例尺，生成 dy 通道，实现在某个区域的 y 方向散开的效果。 + +## 开始使用 + +jitterY + +```ts +import { Chart } from '@antv/g2'; + +const chart = new Chart({ + container: 'container', +}); + +chart + .point() + .data({ + type: 'fetch', + value: + 'https://gw.alipayobjects.com/os/bmw-prod/2c813e2d-2276-40b9-a9af-cf0a0fb7e942.csv', + }) + .transform({ type: 'sortY' }) + .transform({ type: 'jitterY' }) + .encode('x', 'Horsepower') + .encode('y', 'Cylinders') + .encode('color', 'Cylinders') + .scale('y', { type: 'point' }) + .scale('color', { type: 'ordinal' }); + +chart.render(); +``` + +## 选项 + +| 属性 | 描述 | 类型 | 默认值 | +|-------------------|------------------------------------------------|---------------------|-----------------------| +| padding | 每个分组之间的间距 [0 ~ 1] | `number` | `0` | +| random | 随机函数，返回值为 [0, 1) | `() => number` | `Math.random` | diff --git a/src/lib/core.ts b/src/lib/core.ts index 6695827c43..fd0ed00339 100644 --- a/src/lib/core.ts +++ b/src/lib/core.ts @@ -116,6 +116,7 @@ import { NormalizeY, Jitter, JitterX, + JitterY, SymmetryY, DiffY, Select, @@ -180,6 +181,7 @@ export function corelib() { 'transform.dodgeX': DodgeX, 'transform.jitter': Jitter, 'transform.jitterX': JitterX, + 'transform.jitterY': JitterY, 'transform.symmetryY': SymmetryY, 'transform.diffY': DiffY, 'transform.stackEnter': StackEnter, diff --git a/src/spec/transform.ts b/src/spec/transform.ts index 503658a8ee..5245ef6d62 100644 --- a/src/spec/transform.ts +++ b/src/spec/transform.ts @@ -8,6 +8,7 @@ export type Transform = | StackEnterTransform | JitterTransform | JitterXTransform + | JitterYTransform | SymmetryYTransform | DiffYTransform | SelectTransform @@ -34,6 +35,7 @@ export type TransformTypes = | 'stackEnter' | 'jitter' | 'jitterX' + | 'jitterY' | 'symmetryY' | 'diffY' | 'select' @@ -109,6 +111,12 @@ export type JitterXTransform = { random?: () => number; }; +export type JitterYTransform = { + type?: 'jitterY'; + padding?: number; + random?: () => number; +}; + export type StackEnterTransform = { type?: 'stackEnter'; groupBy?: string[] | string; diff --git a/src/transform/index.ts b/src/transform/index.ts index f98359bd90..73f9e30aaf 100644 --- a/src/transform/index.ts +++ b/src/transform/index.ts @@ -23,6 +23,7 @@ export { StackEnter } from './stackEnter'; export { NormalizeY } from './normalizeY'; export { Jitter } from './jitter'; export { JitterX } from './jitterX'; +export { JitterY } from './jitterY'; export { SymmetryY } from './symmetryY'; export { DiffY } from './diffY'; export { Select } from './select'; @@ -66,6 +67,7 @@ export type { StackEnterOptions } from './stackEnter'; export type { NormalizeYOptions } from './normalizeY'; export type { JitterOptions } from './jitter'; export type { JitterXOptions } from './jitterX'; +export type { JitterYOptions } from './jitterY'; export type { SymmetryYOptions } from './symmetryY'; export type { DiffYOptions } from './diffY'; export type { SelectOptions } from './select'; diff --git a/src/transform/jitterY.ts b/src/transform/jitterY.ts new file mode 100644 index 0000000000..bf78b2d7c1 --- /dev/null +++ b/src/transform/jitterY.ts @@ -0,0 +1,30 @@ +import { deepMix } from '@antv/util'; +import { TransformComponent as TC } from '../runtime'; +import { JitterYTransform } from '../spec'; +import { column, columnOf } from './utils/helper'; +import { rangeOf, interpolate } from './jitter'; + +export type JitterYOptions = Omit; + +/** + * The JitterY transform produce dy channels for marks (especially for point) + * with ordinal x and y dimension, say to make them jitter in their own space. + */ +export const JitterY: TC = (options = {}) => { + const { padding = 0, random = Math.random } = options; + return (I, mark) => { + const { encode, scale } = mark; + const { y: scaleY } = scale; + const [Y] = columnOf(encode, 'y'); + const rangeY = rangeOf(Y, scaleY, padding); + const DY = I.map(() => interpolate(random(), ...rangeY)); + return [ + I, + deepMix({ scale: { y: { padding: 0.5 } } }, mark, { + encode: { dy: column(DY) }, + }), + ]; + }; +}; + +JitterY.props = {};