UNPKG

25.4 kBTypeScriptView Raw
1import { Adjust } from '@antv/adjust';
2import { Attribute } from '@antv/attr';
3import Base from '../base';
4import { BBox, Coordinate, IGroup, IShape, Scale } from '../dependents';
5import { AdjustOption, AnimateOption, AttributeOption, ColorAttrCallback, Data, Datum, GeometryLabelCfg, GeometryTooltipOption, LabelCallback, LabelOption, LooseObject, MappingDatum, ScaleOption, ShapeAttrCallback, ShapeFactory, ShapeInfo, ShapeMarkerCfg, ShapeMarkerAttrs, ShapePoint, SizeAttrCallback, StateOption, StyleCallback, StyleOption, TooltipCallback, CustomOption } from '../interface';
6import Element from './element';
7/** geometry.init() 传入参数 */
8export interface InitCfg {
9 /** 坐标系 */
10 coordinate?: Coordinate;
11 /** 数据 */
12 data?: Data;
13 /** 主题对象 */
14 theme?: LooseObject;
15 /** 列定义 */
16 scaleDefs?: Record<string, ScaleOption>;
17 /** 因为数据使用的引用,所以需要有一个标识位标识数据是否发生了更新 */
18 isDataChanged?: boolean;
19 isCoordinateChanged?: boolean;
20}
21/** Geometry 构造函数参数 */
22export interface GeometryCfg {
23 /** Geometry shape 的容器。 */
24 container: IGroup;
25 /** 绘制的坐标系对象。 */
26 coordinate?: Coordinate;
27 /** 绘制数据。 */
28 data?: Data;
29 /** 需要的 scales。 */
30 scales?: Record<string, Scale>;
31 /** 列定义 */
32 scaleDefs?: Record<string, ScaleOption>;
33 /** Geometry labels 的容器 */
34 labelsContainer?: IGroup;
35 /** 是否对数据进行排序 */
36 sortable?: boolean;
37 /** elements 的 zIndex 默认按顺序提升,通过 zIndexReversed 可以反序,从而数据越前,层级越高 */
38 zIndexReversed?: boolean;
39 /** 是否需要对 zIndex 进行 sort。因为耗时长,由具体场景自行决定 */
40 sortZIndex?: boolean;
41 /** 延迟渲染 Geometry 数据标签. 设置为 true 时,会在浏览器空闲时期被调用, 也可以指定具体 timeout 时间 */
42 useDeferredLabel?: boolean | number;
43 /** 是否可见 */
44 visible?: boolean;
45 /** 主题配置 */
46 theme?: LooseObject;
47 /** 组间距 */
48 intervalPadding?: number;
49 /** 组内间距 */
50 dodgePadding?: number;
51 /** 柱状图最大宽度 */
52 maxColumnWidth?: number;
53 /** 柱状图最小宽度 */
54 minColumnWidth?: number;
55 /** 默认宽度占比,interval类型和schema类型通用 */
56 columnWidthRatio?: number;
57 /** 玫瑰图占比 */
58 roseWidthRatio?: number;
59 /** 多层饼图/环图占比 */
60 multiplePieWidthRatio?: number;
61}
62/**
63 * Geometry 几何标记基类,主要负责数据到图形属性的映射以及绘制逻辑。
64 */
65export default class Geometry<S extends ShapePoint = ShapePoint> extends Base {
66 /** Geometry 几何标记类型。 */
67 readonly type: string;
68 /** ShapeFactory 对应的类型。 */
69 readonly shapeType: string;
70 /** Coordinate 坐标系实例。 */
71 coordinate: Coordinate;
72 /** 用户绘制数据。 */
73 data: Data;
74 /** 图形绘制容器。 */
75 readonly container: IGroup;
76 /** label 绘制容器。 */
77 readonly labelsContainer: IGroup;
78 /** 是否对数据进行排序,默认为 false。 */
79 sortable: boolean;
80 /** 当前 Geometry 实例主题。 */
81 theme: LooseObject;
82 /** 存储 geometry 需要的 scales,需要外部传入。 */
83 scales: Record<string, Scale>;
84 /** scale 定义,需要外部传入。 */
85 scaleDefs: Record<string, ScaleOption>;
86 /** 画布区域,用于 label 布局。 */
87 canvasRegion: BBox;
88 /** Attribute map */
89 attributes: Record<string, Attribute>;
90 /** Element map */
91 elements: Element[];
92 /**
93 * 存储处理后的数据,
94 * + init() 及 updateData() 逻辑后, 结构为 Data[];
95 * + paint() 逻辑后,结构为 MappingDatum[][]。
96 */
97 dataArray: MappingDatum[][];
98 /** 存储 tooltip 配置信息。 */
99 tooltipOption: GeometryTooltipOption | boolean;
100 /** 存储 label 配置信息。 */
101 labelOption: LabelOption | false;
102 /** 状态量相关的配置项 */
103 stateOption: StateOption;
104 /** 使用 key-value 结构存储 Element,key 为每个 Element 实例对应的唯一 ID */
105 elementsMap: Record<string, Element>;
106 /** animate 配置项 */
107 animateOption: AnimateOption | boolean;
108 /** 图形属性映射配置 */
109 protected attributeOption: Record<string, AttributeOption>;
110 /** adjust 配置项 */
111 protected adjustOption: AdjustOption[];
112 /** style 配置项 */
113 protected styleOption: StyleOption;
114 /** custom 自定义的配置项 */
115 protected customOption: CustomOption;
116 /** 每个 Geometry 对应的 Shape 工厂实例,用于创建各个 Shape */
117 protected shapeFactory: ShapeFactory;
118 /** 存储上一次渲染时的 element 映射表,用于更新逻辑 */
119 protected lastElementsMap: Record<string, Element>;
120 /** 是否生成多个点来绘制图形。 */
121 protected generatePoints: boolean;
122 /** 存储发生图形属性映射前的数据 */
123 protected beforeMappingData: Data[];
124 /** 存储每个 shape 的默认 size,用于 Interval、Schema 几何标记 */
125 protected defaultSize: number;
126 private userTheme;
127 private adjusts;
128 private lastAttributeOption;
129 private idFields;
130 private geometryLabel;
131 /** 组间距 */
132 protected intervalPadding: number;
133 /** 组内间距 */
134 protected dodgePadding: number;
135 /** 柱状图最大宽度 */
136 protected maxColumnWidth: number;
137 /** 柱状图最小宽度 */
138 protected minColumnWidth: number;
139 /** 一般柱状图宽度占比 */
140 protected columnWidthRatio: number;
141 /** 玫瑰图占比 */
142 protected roseWidthRatio: number;
143 /** 多层饼图/环图占比 */
144 protected multiplePieWidthRatio: number;
145 /** elements 的 zIndex 默认按顺序提升,通过 zIndexReversed 可以反序,从而数据越前,层级越高 */
146 zIndexReversed?: boolean;
147 /** 是否需要对 zIndex 进行 sort。因为耗时长,由具体场景自行决定 */
148 sortZIndex?: boolean;
149 protected useDeferredLabel?: null | number;
150 /** 虚拟 Group,用于图形更新 */
151 private offscreenGroup;
152 private groupScales;
153 private hasSorted;
154 protected isCoordinateChanged: boolean;
155 /**
156 * 创建 Geometry 实例。
157 * @param cfg
158 */
159 constructor(cfg: GeometryCfg);
160 /**
161 * 配置 position 通道映射规则。
162 *
163 * @example
164 * ```typescript
165 * // 数据结构: [{ x: 'A', y: 10, color: 'red' }]
166 * geometry.position('x*y');
167 * geometry.position([ 'x', 'y' ]);
168 * geometry.position({
169 * fields: [ 'x', 'y' ],
170 * });
171 * ```
172 *
173 * @param cfg 映射规则
174 * @returns
175 */
176 position(cfg: string | string[] | AttributeOption): Geometry;
177 /**
178 * 配置 color 通道映射规则。
179 *
180 * @example
181 * ```typescript
182 * // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
183 * geometry.color({
184 * fields: [ 'x' ],
185 * values: [ '#1890ff', '#5AD8A6' ],
186 * });
187 * ```
188 *
189 * @param field 映射规则
190 * @returns
191 */
192 color(field: AttributeOption): Geometry;
193 /**
194 * @example
195 * ```typescript
196 * // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
197 *
198 * // 使用 '#1890ff' 颜色渲染图形
199 * geometry.color('#1890ff');
200 *
201 * // 根据 x 字段的数据值进行颜色的映射,这时候 G2 会在内部调用默认的回调函数,读取默认提供的颜色进行数据值到颜色值的映射。
202 * geometry.color('x');
203 *
204 * // 将 'x' 字段的数据值映射至指定的颜色值 colors(可以是字符串也可以是数组),此时用于通常映射分类数据
205 * geometry.color('x', [ '#1890ff', '#5AD8A6' ]);
206 *
207 * // 使用回调函数进行颜色值的自定义;可以使用多个字段使用、*号连接
208 * geometry.color('x', (xVal) => {
209 * if (xVal === 'a') {
210 * return 'red';
211 * }
212 * return 'blue';
213 * });
214 *
215 * // 指定颜色的渐变路径,用于映射连续的数据
216 * geometry.color('x', '#BAE7FF-#1890FF-#0050B3');
217 * ```
218 *
219 * @param field 参与颜色映射的数据字段,多个字段使用 '*' 连接符进行连接。
220 * @param cfg Optional, color 映射规则。
221 * @returns
222 */
223 color(field: string, cfg?: string | string[] | ColorAttrCallback): Geometry;
224 /**
225 * 配置 shape 通道映射规则。
226 *
227 * @example
228 *
229 * ```typescript
230 * // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
231 * geometry.shape({
232 * fields: [ 'x' ],
233 * });
234 * ```
235 *
236 * @param field 映射规则配置。
237 * @returns
238 */
239 shape(field: AttributeOption): Geometry;
240 /**
241 *
242 * @example
243 * ```typescript
244 * // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
245 *
246 * // 指定常量,将所有数据值映射到固定的 shape
247 * geometry.shape('circle');
248 *
249 * // 将指定的字段映射到内置的 shapes 数组中
250 * geometry.shape('x');
251 *
252 * // 将指定的字段映射到指定的 shapes 数组中
253 * geometry.shape('x', [ 'circle', 'diamond', 'square' ]);
254 *
255 * // 使用回调函数获取 shape,用于个性化的 shape 定制,可以根据单个或者多个字段确定
256 * geometry.shape('x', (xVal) => {
257 * if (xVal === 'a') {
258 * return 'circle';
259 * }
260 * return 'diamond';
261 * });
262 * ```
263 *
264 * @param field 参与 shape 映射的数据字段,多个字段使用 '*' 连接符进行连接。
265 * @param cfg Optional, shape 映射规则。
266 * @returns
267 */
268 shape(field: string, cfg?: string[] | ShapeAttrCallback): Geometry;
269 /**
270 * 配置 size 通道映射规则。
271 *
272 * @example
273 * ```typescript
274 * // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
275 * geometry.size({
276 * values: [ 10 ],
277 * })
278 * ```
279 *
280 * @param field 映射规则。
281 * @returns
282 */
283 size(field: AttributeOption): Geometry;
284 /**
285 *
286 * @example
287 * ```typescript
288 * // data: [{ x: 'A', y: 10, color: 'red' }, { x: 'B', y: 30, color: 'yellow' }]
289 *
290 * // 直接指定像素大小
291 * geometry.size(10);
292 *
293 * // 指定映射到 size 的字段,使用内置的默认大小范围为 [1, 10]
294 * geometry.size('x');
295 *
296 * // 指定映射到 size 字段外,还提供了 size 的最大值和最小值范围
297 * geometry.size('x', [ 5, 30 ]);
298 *
299 * // 使用回调函数映射 size,用于个性化的 size 定制,可以使用多个字段进行映射
300 * geometry.size('x', (xVal) => {
301 * if (xVal === 'a') {
302 * return 10;
303 * }
304 * return 5;
305 * });
306 * ```
307 *
308 * @param field 参与 size 映射的数据字段,多个字段使用 '*' 连接符进行连接。
309 * @param cfg Optional, size 映射规则
310 * @returns
311 */
312 size(field: number | string, cfg?: [number, number] | SizeAttrCallback): Geometry;
313 /**
314 * 设置数据调整方式。G2 目前内置了四种类型:
315 * 1. dodge
316 * 2. stack
317 * 3. symmetric
318 * 4. jitter
319 *
320 *
321 * **Tip**
322 * + 对于 'dodge' 类型,可以额外进行如下属性的配置:
323 * ```typescript
324 * geometry.adjust('dodge', {
325 * marginRatio: 0, // 取 0 到 1 范围的值(相对于每个柱子宽度),用于控制一个分组中柱子之间的间距
326 * dodgeBy: 'x', // 该属性只对 'dodge' 类型生效,声明以哪个数据字段为分组依据
327 * });
328 * ```
329 *
330 * + 对于 'stack' 类型,可以额外进行如下属性的配置:
331 * ```typescript
332 * geometry.adjust('stack', {
333 * reverseOrder: false, // 用于控制是否对数据进行反序操作
334 * });
335 * ```
336 *
337 * @example
338 * ```typescript
339 * geometry.adjust('stack');
340 *
341 * geometry.adjust({
342 * type: 'stack',
343 * reverseOrder: false,
344 * });
345 *
346 * // 组合使用 adjust
347 * geometry.adjust([ 'stack', 'dodge' ]);
348 *
349 * geometry.adjust([
350 * { type: 'stack' },
351 * { type: 'dodge', dodgeBy: 'x' },
352 * ]);
353 * ```
354 *
355 * @param adjustCfg 数据调整配置
356 * @returns
357 */
358 adjust(adjustCfg: string | string[] | AdjustOption | AdjustOption[]): Geometry;
359 /**
360 * 图形样式配置。
361 *
362 * @example
363 * ```typescript
364 * // 配置图形样式
365 * style({
366 * lineWidth: 2,
367 * stroke: '#1890ff',
368 * });
369 *
370 * // 根据具体的数据进行详细配置
371 * style({
372 * fields: [ 'x', 'y' ], // 数据字段
373 * callback: (xVal, yVal) => {
374 * const style = { lineWidth: 2, stroke: '#1890ff' };
375 * if (xVal === 'a') {
376 * style.lineDash = [ 2, 2 ];
377 * }
378 * return style;
379 * },
380 * });
381 * ```
382 *
383 * @param field 配置样式属性或者样式规则。
384 * @returns
385 */
386 style(field: StyleOption | LooseObject): Geometry;
387 /**
388 * @example
389 * ```typescript
390 * style('x*y', (xVal, yVal) => {
391 * const style = { lineWidth: 2, stroke: '#1890ff' };
392 * if (xVal === 'a') {
393 * style.lineDash = [ 2, 2 ];
394 * }
395 * return style;
396 * });
397 * ```
398 *
399 * @param field 数据字段或者样式配置规则。
400 * @param styleFunc Optional, 样式配置回调函数。
401 * @returns
402 */
403 style(field: string, styleFunc: StyleCallback): Geometry;
404 /**
405 * 配置 Geometry 显示的 tooltip 内容。
406 *
407 * `tooltip(false)` 代表关闭 tooltip。
408 * `tooltip(true)` 代表开启 tooltip。
409 *
410 * Geometry 默认允许 tooltip 展示,我们可以使用以下方法对 tooltip 的展示内容进行配置:
411 *
412 * @example
413 * ```typescript
414 * // data: [{x: 'a', y: 10}]
415 * tooltip({
416 * fields: [ 'x' ],
417 * });
418 * ```
419 * ![](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*268uQ50if60AAAAAAAAAAABkARQnAQ)
420 *
421 * ```typescript
422 * tooltip({
423 * fields: [ 'x', 'y' ],
424 * });
425 * ```
426 * ![](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*A_ujSa8QhtcAAAAAAAAAAABkARQnAQ)
427 *
428 * tooltip() 方法同样支持数据映射及回调用法:
429 *
430 * @example
431 * ```typescript
432 * chart.tooltip({
433 * itemTpl: '<li>{x}: {y}</li>',
434 * });
435 *
436 * chart.line()
437 * .position('x*y')
438 * .tooltip({
439 * fields: [ 'x', 'y' ],
440 * callback: (x, y) => {
441 * return {
442 * x,
443 * y,
444 * };
445 * },
446 * });
447 * ```
448 *
449 * 其返回的值必须为对象,该值中的属性同 chart.tooltip() 的 itemTpl 模板相对应,返回的变量可用于 itemTpl 的字符串模板。
450 *
451 * @param field tooltip 配置信息。
452 * @returns
453 */
454 tooltip(field: GeometryTooltipOption | boolean): Geometry;
455 /**
456 * @example
457 * ```typescript
458 * // data: [{x: 'a', y: 10}]
459 *
460 * // 等同于 tooltip({ fields: [ 'x' ] })
461 * tooltip('x');
462 *
463 * // 等同于 tooltip({ fields: [ 'x', 'y' ] })
464 * tooltip('x*y');
465 *
466 * // 等同于 tooltip({ fields: [ 'x', 'y' ], callback: (x, y) => { x, y } })
467 * tooltip('x*y', (x, y) => {
468 * return {
469 * x,
470 * y,
471 * };
472 * });
473 * ```
474 *
475 * @param field 参与映射的字段。
476 * @param cfg Optional, 回调函数
477 * @returns
478 */
479 tooltip(field: string, cfg?: TooltipCallback): Geometry;
480 /**
481 * Geometry 动画配置。
482 *
483 * + `animate(false)` 关闭动画
484 * + `animate(true)` 开启动画,默认开启。
485 *
486 * 我们将动画分为四个场景:
487 * 1. appear: 图表第一次加载时的入场动画;
488 * 2. enter: 图表绘制完成,发生更新后,产生的新图形的进场动画;
489 * 3. update: 图表绘制完成,数据发生变更后,有状态变更的图形的更新动画;
490 * 4. leave: 图表绘制完成,数据发生变更后,被销毁图形的销毁动画。
491 *
492 * @example
493 * ```typescript
494 * animate({
495 * enter: {
496 * duration: 1000, // enter 动画执行时间
497 * },
498 * leave: false, // 关闭 leave 销毁动画
499 * });
500 * ```
501 *
502 * @param cfg 动画配置
503 * @returns
504 */
505 animate(cfg: AnimateOption | boolean): Geometry;
506 /**
507 * Geometry label 配置。
508 *
509 * @example
510 * ```ts
511 * // data: [ {x: 1, y: 2, z: 'a'}, {x: 2, y: 2, z: 'b'} ]
512 * // 在每个图形上显示 z 字段对应的数值
513 * label({
514 * fields: [ 'z' ]
515 * });
516 *
517 * label(false); // 不展示 label
518 *
519 * // 在每个图形上显示 x 字段对应的数值,同时配置文本颜色为红色
520 * label('x', {
521 * style: {
522 * fill: 'red',
523 * },
524 * })
525 *
526 * // 以 type 类型的 label 渲染每个图形上显示 x 字段对应的数值,同时格式化文本内容
527 * label('x', (xValue) => {
528 * return {
529 * content: xValue + '%',
530 * };
531 * }, {
532 * type: 'base' // 声明 label 类型
533 * })
534 * ```
535 *
536 * @param field
537 * @returns label
538 */
539 label(field: LabelOption | false | string): Geometry;
540 label(field: string, secondParam: GeometryLabelCfg | LabelCallback): Geometry;
541 label(field: string, secondParam: LabelCallback, thirdParam: GeometryLabelCfg): Geometry;
542 /**
543 * 设置状态对应的样式。
544 *
545 * @example
546 * ```ts
547 * chart.interval().state({
548 * selected: {
549 * animate: { duration: 100, easing: 'easeLinear' },
550 * style: {
551 * lineWidth: 2,
552 * stroke: '#000',
553 * },
554 * },
555 * });
556 * ```
557 *
558 * 如果图形 shape 是由多个 shape 组成,即为一个 G.Group 对象,那么针对 group 中的每个 shape,我们需要使用下列方式进行状态样式设置:
559 * 如果我们为 group 中的每个 shape 设置了 'name' 属性(shape.set('name', 'xx')),则以 'name' 作为 key,否则默认以索引值(即 shape 的 添加顺序)为 key。
560 *
561 * ```ts
562 * chart.interval().shape('groupShape').state({
563 * selected: {
564 * style: {
565 * 0: { lineWidth: 2 },
566 * 1: { fillOpacity: 1 },
567 * }
568 * }
569 * });
570 * ```
571 *
572 * @param cfg 状态样式
573 */
574 state(cfg: StateOption): this;
575 /**
576 * 用于向 shape 中传入自定义的数据。目前可能仅仅可能用于在自定义 shape 的时候,像自定义 shape 中传入自定义的数据,方便实现自定义 shape 的配置能力。
577 *
578 * @example
579 * ```ts
580 * chart.interval().customInfo({ yourData: 'hello, g2!' });
581 * ```
582 *
583 * 然后在自定义 shape 的时候,可以拿到这个信息。
584 *
585 * ```ts
586 * registerShape('interval', 'your-shape', {
587 * draw(shapeInfo, container) {
588 * const { customInfo } = shapeInfo;
589 * console.log(customInfo); // will log { yourData: 'hello, g2!' }.
590 * }
591 * });
592 * ```
593 *
594 * @param cfg
595 */
596 customInfo(cfg: any): this;
597 /**
598 * 初始化 Geomtry 实例:
599 * 创建 [[Attribute]] and [[Scale]] 实例,进行数据处理,包括分组、数值化以及数据调整。
600 */
601 init(cfg?: InitCfg): void;
602 /**
603 * Geometry 更新。
604 * @param [cfg] 更新的配置
605 */
606 update(cfg?: InitCfg): void;
607 /**
608 * 将原始数据映射至图形空间,同时创建图形对象。
609 */
610 paint(isUpdate?: boolean): void;
611 /**
612 * 清空当前 Geometry,配置项仍保留,但是内部创建的对象全部清空。
613 * @override
614 */
615 clear(): void;
616 /**
617 * 销毁 Geometry 实例。
618 */
619 destroy(): void;
620 /**
621 * 获取决定分组的图形属性对应的 scale 实例。
622 * @returns
623 */
624 getGroupScales(): Scale[];
625 /**
626 * 根据名字获取图形属性实例。
627 */
628 getAttribute(name: string): Attribute;
629 /** 获取 x 轴对应的 scale 实例。 */
630 getXScale(): Scale;
631 /** 获取 y 轴对应的 scale 实例。 */
632 getYScale(): Scale;
633 /**
634 * 获取决定分组的图形属性实例。
635 */
636 getGroupAttributes(): Attribute[];
637 /** 获取图形属性默认的映射值。 */
638 getDefaultValue(attrName: string): any;
639 /**
640 * 获取该数据发生图形映射后对应的 Attribute 图形空间数据。
641 * @param attr Attribute 图形属性实例。
642 * @param obj 需要进行映射的原始数据。
643 * @returns
644 */
645 getAttributeValues(attr: Attribute, obj: Datum): any[];
646 /**
647 * 获取对应的 adjust 实例
648 * @param adjustType
649 * @returns
650 */
651 getAdjust(adjustType: string): Adjust;
652 /**
653 * 获得 coordinate 实例
654 * @returns
655 */
656 getCoordinate(): Coordinate;
657 getData(): Data;
658 /**
659 * 获取 shape 对应的 marker 样式。
660 * @param shapeName shape 具体名字
661 * @param cfg marker 信息
662 * @returns
663 */
664 getShapeMarker(shapeName: string, cfg: ShapeMarkerCfg): ShapeMarkerAttrs;
665 /**
666 * 根据一定的规则查找 Geometry 的 Elements。
667 *
668 * ```typescript
669 * getElementsBy((element) => {
670 * const data = element.getData();
671 *
672 * return data.a === 'a';
673 * });
674 * ```
675 *
676 * @param condition 定义查找规则的回调函数。
677 * @returns
678 */
679 getElementsBy(condition: (element: Element) => boolean): Element[];
680 /**
681 * 获取 Geometry 的所有 Elements。
682 *
683 * ```typescript
684 * getElements();
685 * ```
686 */
687 getElements(): Element[];
688 /**
689 * 获取数据对应的唯一 id。
690 * @param data Element 对应的绘制数据
691 * @returns
692 */
693 getElementId(data: MappingDatum | MappingDatum[]): any;
694 /**
695 * 获取所有需要创建 scale 的字段名称。
696 */
697 getScaleFields(): string[];
698 /**
699 * 显示或者隐藏 geometry。
700 * @param visible
701 */
702 changeVisible(visible: boolean): void;
703 /**
704 * 获得所有的字段
705 */
706 getFields(): any[];
707 /**
708 * 获取当前配置中的所有分组 & 分类的字段。
709 * @return fields string[]
710 */
711 getGroupFields(): string[];
712 /**
713 * 获得图形的 x y 字段。
714 */
715 getXYFields(): string[];
716 /**
717 * x 字段
718 * @returns
719 */
720 getXField(): string;
721 /**
722 * y 字段
723 * @returns
724 */
725 getYField(): string;
726 /**
727 * 获取该 Geometry 下所有生成的 shapes。
728 * @returns shapes
729 */
730 getShapes(): (IShape | IGroup)[];
731 /**
732 * 获取虚拟 Group。
733 * @returns
734 */
735 getOffscreenGroup(): IGroup;
736 sort(mappingArray: Data[]): void;
737 /**
738 * 调整度量范围。主要针对发生层叠以及一些特殊需求的 Geometry,比如 Interval 下的柱状图 Y 轴默认从 0 开始。
739 */
740 protected adjustScale(): void;
741 /**
742 * 获取当前 Geometry 对应的 Shape 工厂实例。
743 */
744 protected getShapeFactory(): ShapeFactory;
745 /**
746 * 获取每个 Shape 对应的关键点数据。
747 * @param obj 经过分组 -> 数字化 -> adjust 调整后的数据记录
748 * @returns
749 */
750 protected createShapePointsCfg(obj: Datum): S;
751 /**
752 * 创建 Element 实例。
753 * @param mappingDatum Element 对应的绘制数据
754 * @param [isUpdate] 是否处于更新阶段
755 * @returns element 返回创建的 Element 实例
756 */
757 protected createElement(mappingDatum: MappingDatum, index: number, isUpdate?: boolean): Element;
758 /**
759 * 获取每条数据对应的图形绘制数据。
760 * @param mappingDatum 映射后的数据
761 * @returns draw cfg
762 */
763 protected getDrawCfg(mappingDatum: MappingDatum): ShapeInfo;
764 protected updateElements(mappingDataArray: MappingDatum[][], isUpdate?: boolean): void;
765 /**
766 * 获取渲染的 label 类型。
767 */
768 protected getLabelType(): string;
769 /**
770 * 获取 Y 轴上的最小值。
771 */
772 protected getYMinValue(): number;
773 protected createAttrOption(attrName: string, field: AttributeOption | string | number, cfg?: any): void;
774 protected initAttributes(): void;
775 private processData;
776 private adjustData;
777 private groupData;
778 private updateStackRange;
779 private beforeMapping;
780 private generateShapePoints;
781 private normalizeValues;
782 private mapping;
783 private convertPoint;
784 private getStyleCfg;
785 private setCfg;
786 private renderLabels;
787 /**
788 * 是否需要进行群组入场动画
789 * 规则:
790 * 1. 如果发生更新,则不进行
791 * 2. 如果用户关闭 geometry 动画,则不进行
792 * 3. 如果用户关闭了 appear 动画,则不进行
793 * 4. 如果用户配置了 appear.animation,则不进行
794 */
795 private canDoGroupAnimation;
796}
797
\No newline at end of file