diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx
index 9af14bc96..aa54c6f67 100644
--- a/packages/f2/src/components/geometry/index.tsx
+++ b/packages/f2/src/components/geometry/index.tsx
@@ -13,7 +13,7 @@ import { ChartChildProps } from '../../chart';
import Selection, { SelectionProps, SelectionState } from './selection';
import { Adjust, Dodge, Jitter, Stack, Symmetric } from '../../deps/f2-adjust/src';
import { toTimeStamp } from '../../util/index';
-import AttrController from '../../controller/attr';
+import AttrController, { ATTRS } from '../../controller/attr';
import { Scale } from '../../deps/f2-scale/src';
import { AnimationProps, isEqual } from '@antv/f-engine';
import { AdjustType, AdjustProps } from './Adjust';
@@ -116,26 +116,39 @@ class Geometry<
super(props, context);
mix(this, this.getDefaultCfg());
- const { chart, coord } = props;
+ const { chart } = props;
const attrsRange = this._getThemeAttrsRange();
this.attrController = new AttrController(chart.scale, attrsRange);
- const { attrController, justifyContent } = this;
+ const { attrController } = this;
- const attrOptions = attrController.getAttrOptions(props, !coord.isCyclic() || justifyContent);
+ const attrOptions = this.getAttrOptions(props);
attrController.create(attrOptions);
}
+ getAttrOptions(props) {
+ const { coord } = props;
+ const { attrController, justifyContent } = this;
+ const justifyContentCenter = !coord.isCyclic() || justifyContent;
+
+ const args = {};
+ ATTRS.forEach((d) => (args[d] = props[d]));
+
+ const attrOptions = attrController.getAttrOptions(
+ this.context.px2hd(args),
+ justifyContentCenter
+ );
+ return attrOptions;
+ }
+
willReceiveProps(nextProps) {
- const { props: lastProps, attrController, justifyContent } = this;
- const { data: nextData, adjust: nextAdjust, coord, selection } = nextProps;
+ const { props: lastProps, attrController } = this;
+ const { data: nextData, adjust: nextAdjust, selection } = nextProps;
const { data: lastData, adjust: lastAdjust, selection: lastSelection } = lastProps;
- const justifyContentCenter = !coord.isCyclic() || justifyContent;
- const lastAttrOptions = attrController.getAttrOptions(lastProps, justifyContentCenter);
-
+ const lastAttrOptions = this.getAttrOptions(lastProps);
attrController.attrsRange = this._getThemeAttrsRange();
- const nextAttrOptions = attrController.getAttrOptions(nextProps, justifyContentCenter);
+ const nextAttrOptions = this.getAttrOptions(nextProps);
if (!isEqual(nextAttrOptions, lastAttrOptions)) {
attrController.update(nextAttrOptions);
@@ -516,6 +529,7 @@ class Geometry<
const defaultAttrValues = attrController.getDefaultAttrValues();
const mappedRecords = [];
+
for (let i = 0, len = records.length; i < len; i++) {
const record = records[i];
const { children } = record;
diff --git a/packages/f2/src/components/interval/withInterval.tsx b/packages/f2/src/components/interval/withInterval.tsx
index 76a8822e9..b005a5502 100644
--- a/packages/f2/src/components/interval/withInterval.tsx
+++ b/packages/f2/src/components/interval/withInterval.tsx
@@ -75,7 +75,6 @@ export default (Views) => {
mapping() {
const records = super.mapping();
-
const { props } = this;
const { coord, sizeZoom } = props;
const y0 = this.getY0Value();
diff --git a/packages/f2/src/controller/attr.ts b/packages/f2/src/controller/attr.ts
index 6af272f64..8d8199540 100644
--- a/packages/f2/src/controller/attr.ts
+++ b/packages/f2/src/controller/attr.ts
@@ -18,7 +18,7 @@ type AttrsRange = {
const { Identity, Linear, Category } = Attrs;
// 需要映射的属性名
-const ATTRS = ['x', 'y', 'color', 'size', 'shape'];
+export const ATTRS = ['x', 'y', 'color', 'size', 'shape'];
// 分组处理的属性
const GROUP_ATTRS = ['color', 'size', 'shape'];
@@ -86,6 +86,7 @@ class AttrController {
}
const options = {};
const ranges = this.attrsRange;
+
ATTRS.forEach((attrName: Attr) => {
if (!props[attrName]) return;
const option = this.parseOption(props[attrName], attrName);
diff --git "a/packages/f2/test/components/geometry/__image_snapshots__/attr-test-tsx-geometry-attr-size-field-range-\346\224\257\346\214\201px-1-snap.png" "b/packages/f2/test/components/geometry/__image_snapshots__/attr-test-tsx-geometry-attr-size-field-range-\346\224\257\346\214\201px-1-snap.png"
new file mode 100644
index 000000000..c4d187128
Binary files /dev/null and "b/packages/f2/test/components/geometry/__image_snapshots__/attr-test-tsx-geometry-attr-size-field-range-\346\224\257\346\214\201px-1-snap.png" differ
diff --git "a/packages/f2/test/components/geometry/__image_snapshots__/attr-test-tsx-geometry-attr-size-\346\224\257\346\214\201-px-1-snap.png" "b/packages/f2/test/components/geometry/__image_snapshots__/attr-test-tsx-geometry-attr-size-\346\224\257\346\214\201-px-1-snap.png"
new file mode 100644
index 000000000..86bcf4be4
Binary files /dev/null and "b/packages/f2/test/components/geometry/__image_snapshots__/attr-test-tsx-geometry-attr-size-\346\224\257\346\214\201-px-1-snap.png" differ
diff --git a/packages/f2/test/components/geometry/attr.test.tsx b/packages/f2/test/components/geometry/attr.test.tsx
index eb6f9800c..211afb085 100644
--- a/packages/f2/test/components/geometry/attr.test.tsx
+++ b/packages/f2/test/components/geometry/attr.test.tsx
@@ -456,6 +456,27 @@ describe('Geometry - Attr', () => {
expect(geometryRef.current.records[1].children[0].size).toBe(16);
});
+ it('size 支持 px', async () => {
+ const ref = {};
+ const context = createContext('size 支持px');
+ const { type, props } = (
+
+ );
+
+ const canvas = new Canvas(props);
+ await canvas.render();
+
+ await delay(1000);
+ expect(context).toMatchImageSnapshot();
+ });
+
it('size = {field} 用size大小来做分类', async () => {
const context = createContext('size = {field} 用size大小来做分类', { width: '380px' });
const geometryRef = { current: null };
@@ -477,6 +498,33 @@ describe('Geometry - Attr', () => {
expect(geometryRef.current.records[1].children[0].size).toBe(3);
});
+ it('size = {{ field, range }} 支持px', async () => {
+ const ref = {};
+ const context = createContext('size = {{ field, range }} 支持px');
+ const { type, props } = (
+
+ );
+
+ const canvas = new Canvas(props);
+ await canvas.render();
+
+ await delay(1000);
+ expect(context).toMatchImageSnapshot();
+ });
+
it('size = {{ field, range }} 用size大小来做分类', async () => {
const context = createContext('size = {{ field, range }} 用size大小来做分类', {
width: '380px',