feat(transform): add pack padding and direction

__tests__/plots/static/index.ts

@@ -311,3 +311,5 @@ export { premierLeagueTable } from './premier-league-table';
 export { singlePointBasic } from './single-point-basic';
 export { populationFlowChordDefault } from './population-flow-chord-default';
 export { aaplLineRrangeXY } from './aapl-line-rangeXY';
+export { titanicPointPackSharedRowData } from './titanic-point-pack-shared-row-data';
+export { titanicPointPackSharedDataPadding } from './titanic-point-pack-shared-data-padding';

__tests__/plots/static/titanic-point-pack-shared-data-padding.ts

@@ -0,0 +1,41 @@
+import { G2Spec } from '../../../src';
+
+export function titanicPointPackSharedDataPadding(): G2Spec {
+  return {
+    type: 'facetRect',
+    data: {
+      type: 'fetch',
+      value: 'data/titanic.csv',
+      transform: [
+        {
+          type: 'sortBy',
+          fields: ['survived'],
+        },
+        {
+          type: 'map',
+          callback: ({ survived, ...d }) => ({
+            ...d,
+            survived: survived + '',
+          }),
+        },
+      ],
+    },
+    shareData: true,
+    encode: {
+      x: 'pclass',
+    },
+    children: [
+      {
+        type: 'point',
+        transform: [{ type: 'pack', padding: 2 }],
+        legend: {
+          color: { labelFormatter: (d) => (d === '1' ? 'Yes' : 'No') },
+        },
+        encode: {
+          color: 'survived',
+          shape: 'point',
+        },
+      },
+    ],
+  };
+}

__tests__/plots/static/titanic-point-pack-shared-row-data.ts

@@ -0,0 +1,41 @@
+import { G2Spec } from '../../../src';
+
+export function titanicPointPackSharedRowData(): G2Spec {
+  return {
+    type: 'facetRect',
+    data: {
+      type: 'fetch',
+      value: 'data/titanic.csv',
+      transform: [
+        {
+          type: 'sortBy',
+          fields: ['survived'],
+        },
+        {
+          type: 'map',
+          callback: ({ survived, ...d }) => ({
+            ...d,
+            survived: survived + '',
+          }),
+        },
+      ],
+    },
+    shareData: true,
+    encode: {
+      x: 'pclass',
+    },
+    children: [
+      {
+        type: 'point',
+        transform: [{ type: 'pack', direction: 'row' }],
+        legend: {
+          color: { labelFormatter: (d) => (d === '1' ? 'Yes' : 'No') },
+        },
+        encode: {
+          color: 'survived',
+          shape: 'point',
+        },
+      },
+    ],
+  };
+}

site/docs/spec/transform/pack.zh.md

@@ -52,3 +52,10 @@ facetRect
 
 chart.render();
 ```
+
+## 选项
+
+| 属性               | 描述                                           | 类型                 | 默认值                 |
+|-------------------|------------------------------------------------|---------------------|-----------------------|
+| padding           | 每个元素之间的间距，单位为px                           | `number`            | `0`                   |  
+| direction         | 元素的堆叠方向                                    | `'row' \| 'col'`      | `col`         |

src/runtime/plot.ts

@@ -739,6 +739,7 @@ function initializeState(
       // This is for unit visualization to sync data domain.
       dataDomain,
       modifier,
+      transform,
       key: markKey,
     } = mark;
     const { index, channels, tooltip } = state;
@@ -761,7 +762,7 @@ function initializeState(
       calcPoints(index, markScaleInstance, value, coordinate),
     );
     const count = dataDomain || I.length;
-    const T = modifier ? modifier(P, count, layout) : [];
+    const T = modifier ? modifier(P, count, layout, transform) : [];
     const titleOf = (i) => tooltip.title?.[i]?.value;
     const itemsOf = (i) => tooltip.items.map((V) => V[i]);
     const visualData: Record<string, any>[] = I.map((d, i) => {

src/spec/transform.ts

@@ -223,6 +223,8 @@ export type FlexXTransform = {
 
 export type PackTransform = {
   type?: 'pack';
+  padding?: number;
+  direction?: 'row' | 'col';
 };
 
 export type Reducer =

src/transform/pack.ts

@@ -1,10 +1,14 @@
 import { deepMix } from '@antv/util';
 import { TransformComponent as TC } from '../runtime';
 import { calcBBox } from '../utils/vector';
+import { PackTransform } from '../spec';
 
-export type PackOptions = Record<string, unknown>;
+export type PackOptions = Omit<PackTransform, 'type'>;
+
+function modifier(P, count, layout, transform) {
+  const style = transform.find((item) => item.type === 'pack');
+  const { padding = 0, direction = 'col' } = style;
 
-function modifier(P, count, layout) {
   const pcount = P.length;
   if (pcount === 0) return [];
 
@@ -37,20 +41,19 @@ function modifier(P, count, layout) {
 
   return P.map((points, m) => {
     const [x, y, width, height] = calcBBox(points);
-
-    const i = m % col;
-    const j = Math.floor(m / col);
+    const i = direction === 'col' ? m % col : Math.floor(m / row);
+    const j = direction === 'col' ? Math.floor(m / col) : m % row;
 
     const newX = i * size;
     const newY = (row - j - 1) * size + space;
 
-    const sx = size / width;
-    const sy = size / height;
+    const sx = (size - padding) / width;
+    const sy = (size - padding) / height;
 
     // Translate the shape and mark to make sure the center of
     // shape is overlap before and after scale transformation.
-    const tx = newX - x + offsetX * i;
-    const ty = newY - y - intervalY * j - offsetY;
+    const tx = newX - x + offsetX * i + (1 / 2) * padding;
+    const ty = newY - y - intervalY * j - offsetY + (1 / 2) * padding;
     return `translate(${tx}, ${ty}) scale(${sx}, ${sy})`;
   });
 }