@visactor/vchart 2.0.3-alpha.0 → 2.0.3-alpha.1

package/build/index.es.js

@@ -14167,9 +14167,9 @@ class Graphic extends Node {
   setWidthHeightWithoutTransform(aabbBounds) {
     this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
   }
-  setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context) {
+  setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context, ignorePriority) {
     this.setAttributes(params, forceUpdateTag, context), this.animates && this.animates.forEach(animate => {
-      Object.keys(params).forEach(key => {
+      (animate.priority !== 1 / 0 || ignorePriority) && Object.keys(params).forEach(key => {
         animate.preventAttr(key);
       });
     });
@@ -14340,7 +14340,7 @@ class Graphic extends Node {
       });
     } else this.stopStateAnimates(), this.setAttributesAndPreventAnimate(attrs, !1, {
       type: AttributeUpdateType.STATE
-    });
+    }), this.finalAttribute && Object.assign(this.finalAttribute, attrs);
     this._emitCustomEvent("afterStateUpdate", {
       type: AttributeUpdateType.STATE
     });
@@ -14733,7 +14733,7 @@ let Group$1 = class Group extends Graphic {
   }
   removeChild(child) {
     const data = super.removeChild(child);
-    return child.stage = null, this.getGraphicService().onRemove(child), this.addUpdateBoundTag(), data;
+    return this.getGraphicService().onRemove(child), child.stage = null, this.addUpdateBoundTag(), data;
   }
   removeAllChild(deep = !1) {
     this.forEachChildren(child => {
@@ -16371,14 +16371,10 @@ class Glyph extends Graphic {
       attrs && (Object.assign(stateAttrs, attrs.attributes), (null === (_a = attrs.subAttributes) || void 0 === _a ? void 0 : _a.length) && subAttrs.forEach((subAttrs, index) => {
         Object.assign(subAttrs, attrs.subAttributes[index]);
       }));
-    }), this.subGraphic.forEach((graphic, index) => {
-      graphic.updateNormalAttrs(subAttrs[index]), graphic.applyStateAttrs(subAttrs[index], states, hasAnimation);
     }), this.updateNormalAttrs(stateAttrs), this.currentStates = states, this.applyStateAttrs(stateAttrs, states, hasAnimation);
   }
   clearStates(hasAnimation) {
-    this.stopStateAnimates(), this.hasState() && this.normalAttrs ? (this.currentStates = [], this.subGraphic.forEach(graphic => {
-      graphic.applyStateAttrs(graphic.normalAttrs, this.currentStates, hasAnimation, !0), graphic.normalAttrs = null;
-    }), this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
+    this.stopStateAnimates(), this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
   }
   clone() {
     const glyph = new Glyph(Object.assign({}, this.attribute));
@@ -17747,9 +17743,10 @@ class Polygon extends Graphic {
     return super.needUpdateTag(key, POLYGON_UPDATE_TAG_KEY);
   }
   toCustomPath() {
-    const points = this.attribute.points,
-      path = new CustomPath2D();
-    return points.forEach((point, index) => {
+    let path = super.toCustomPath();
+    if (path) return path;
+    const points = this.attribute.points;
+    return path = new CustomPath2D(), points.forEach((point, index) => {
       0 === index ? path.moveTo(point.x, point.y) : path.lineTo(point.x, point.y);
     }), path.closePath(), path;
   }
@@ -21014,6 +21011,7 @@ let DefaultDrawContribution = class {
     drawContext.updateBounds ? this.useDirtyBounds = !0 : this.useDirtyBounds = !drawContext.stage.params.optimize.disableCheckGraphicWidthOutRange;
   }
   draw(renderService, drawContext) {
+    var _a;
     this.prepareForDraw(renderService, drawContext), drawContext.drawContribution = this, this.currentRenderMap = this.styleRenderMap.get(drawContext.renderStyle) || this.defaultRenderMap, this.currentRenderService = renderService;
     const {
       context: context,
@@ -21028,7 +21026,7 @@ let DefaultDrawContribution = class {
       dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
     }
     const d = context.dpr % 1;
-    (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.reset(!1), context.save(), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), renderService.renderTreeRoots.sort((a, b) => {
+    (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.reset(!1), context.save(), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearScreen.call(renderService.drawParams), renderService.renderTreeRoots.sort((a, b) => {
       var _a, _b;
       return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
     }).forEach(group => {
@@ -21164,7 +21162,7 @@ let DefaultDrawContribution = class {
     return data || this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
   }
   clearScreen(renderService, context, drawContext) {
-    var _a, _b;
+    var _a, _b, _c;
     const {
         clear: clear,
         viewBox: viewBox
@@ -21172,9 +21170,9 @@ let DefaultDrawContribution = class {
       width = viewBox.width(),
       height = viewBox.height();
     if (clear) {
-      context.clearRect(0, 0, width, height);
-      const stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
-      if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), stage && stage.backgroundImg && stage.resources) {
+      context.clearRect(0, 0, width, height), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearRect.call(renderService.drawParams);
+      const stage = null === (_b = renderService.drawParams) || void 0 === _b ? void 0 : _b.stage;
+      if (stage && (context.globalAlpha = null !== (_c = stage.attribute.opacity) && void 0 !== _c ? _c : 1), stage && stage.backgroundImg && stage.resources) {
         const res = stage.resources.get(clear);
         res && "success" === res.state && res.data && context.drawImage(res.data, 0, 0, width, height);
       } else context.fillStyle = createColor(context, clear, {
@@ -21702,13 +21700,19 @@ class Stage extends Group$1 {
       } else this._skipRender = 1;
     }, this.beforeRender = stage => {
       this._beforeRender && this._beforeRender(stage);
+    }, this.afterClearScreen = drawParams => {
+      this._afterClearScreen && this._afterClearScreen(drawParams);
+    }, this.afterClearRect = drawParams => {
+      this._afterClearRect && this._afterClearRect(drawParams);
     }, this.afterRender = stage => {
       this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
     }, this.afterTickCb = () => {
       this.tickedBeforeRender = !0, "rendering" !== this.state && this.renderNextFrame();
     }, this.params = params, this.theme = new Theme(), this.hooks = {
       beforeRender: new SyncHook(["stage"]),
-      afterRender: new SyncHook(["stage"])
+      afterRender: new SyncHook(["stage"]),
+      afterClearScreen: new SyncHook(["stage"]),
+      afterClearRect: new SyncHook(["stage"])
     }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), this.window.create({
       width: params.width,
       height: params.height,
@@ -21720,7 +21724,7 @@ class Stage extends Group$1 {
       canvas: params.canvas
     }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
       main: !0
-    })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
+    })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
       tickRenderMode: "effect"
     }), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
       background: this._background
@@ -22115,7 +22119,7 @@ class Stage extends Group$1 {
     return this._cursor;
   }
   eventPointTransform(e) {
-    const point = this.global.mapToCanvasPoint(e, this.window.getContext().canvas.nativeCanvas);
+    const point = this.global.mapToCanvasPoint(e, this.window);
     return this.stage.window.pointTransform(point.x, point.y);
   }
   pauseTriggerEvent() {
@@ -31728,7 +31732,7 @@ class DefaultTimeline extends EventEmitter {
     return this._animateCount;
   }
   constructor() {
-    super(), this.head = null, this.tail = null, this.animateMap = new Map(), this._animateCount = 0, this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this.id = Generator.GenAutoIncrementId(), this.paused = !1;
+    super(), this.head = null, this.tail = null, this.animateMap = new Map(), this._animateCount = 0, this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this._animationEndFlag = !0, this.id = Generator.GenAutoIncrementId(), this.paused = !1;
   }
   isRunning() {
     return !this.paused && this._animateCount > 0;
@@ -31757,10 +31761,11 @@ class DefaultTimeline extends EventEmitter {
   }
   tick(delta) {
     if (this.paused) return;
+    this._animationEndFlag && (this._animationEndFlag = !1, this.emit("animationStart"));
     const scaledDelta = delta * this._playSpeed;
     this._currentTime += scaledDelta, this.forEachAccessAnimate((animate, i) => {
       animate.status === AnimateStatus.END ? this.removeAnimate(animate, !0) : animate.status !== AnimateStatus.RUNNING && animate.status !== AnimateStatus.INITIAL || animate.advance(scaledDelta);
-    }), 0 === this._animateCount && this.emit("animationEnd");
+    }), 0 === this._animateCount && (this._animationEndFlag = !0, this.emit("animationEnd"));
   }
   clear() {
     this.forEachAccessAnimate(animate => {
@@ -31824,7 +31829,9 @@ class Animate {
     return this._timeline;
   }
   bind(target) {
-    return this.target = target, this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
+    return this.target = target, this.target.animates || (this.target.animates = new Map()), this.target.animates.set(this.id, this), this.onRemove(() => {
+      this.stop(), this.target.animates.delete(this.id);
+    }), this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
   }
   to(props, duration = 300, easing = "linear") {
     const step = new Step(AnimateStepType.to, props, duration, easing);
@@ -32038,8 +32045,8 @@ class DefaultTicker extends EventEmitter {
   }
   init() {
     this.interval = 16, this.status = STATUS$1.INITIAL, application.global.hooks.onSetEnv.tap("graph-ticker", () => {
-      this.initHandler();
-    }), application.global.env && this.initHandler();
+      this.initHandler(!1);
+    }), application.global.env && this.initHandler(!1);
   }
   addTimeline(timeline) {
     this.timelines.push(timeline);
@@ -32050,10 +32057,11 @@ class DefaultTicker extends EventEmitter {
   getTimelines() {
     return this.timelines;
   }
-  initHandler() {
-    this.setupTickHandler();
+  initHandler(force = !1) {
+    this.setupTickHandler(force);
   }
-  setupTickHandler() {
+  setupTickHandler(force = !1) {
+    if (!force && this.tickerHandler) return !0;
     const handler = new RAFTickHandler();
     return this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0;
   }
@@ -32104,7 +32112,7 @@ class DefaultTicker extends EventEmitter {
     return this.status = STATUS$1.RUNNING, this.tickerHandler.tick(0, this.handleTick), !0;
   }
   stop() {
-    this.status = STATUS$1.INITIAL, this.setupTickHandler(), this.lastFrameTime = -1;
+    this.status = STATUS$1.INITIAL, this.setupTickHandler(!0), this.lastFrameTime = -1;
   }
   trySyncTickStatus() {
     this.status === STATUS$1.INITIAL && this.timelines.some(timeline => timeline.isRunning()) ? this.start() : this.status === STATUS$1.RUNNING && this.timelines.every(timeline => !timeline.isRunning()) && this.stop();
@@ -32114,7 +32122,8 @@ class DefaultTicker extends EventEmitter {
     this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1;
   }
   checkSkip(delta) {
-    if ("performance" === this.stage.params.optimize.tickRenderMode) return !1;
+    var _a, _b, _c;
+    if ("performance" === (null === (_c = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.params) || void 0 === _b ? void 0 : _b.optimize) || void 0 === _c ? void 0 : _c.tickRenderMode)) return !1;
     return delta < this.interval + 2 * (Math.random() - .5) * this._jitter;
   }
 }
@@ -32412,10 +32421,11 @@ class AnimateExecutor {
   _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
     var _a, _b, _c, _d;
     if (custom && customType) {
-      const customParams = this.resolveValue(customParameters, graphic, {
+      const customParams = Object.assign({
           width: graphic.stage.width,
-          height: graphic.stage.height
-        }),
+          height: graphic.stage.height,
+          group: this._target.parent
+        }, this.resolveValue(customParameters, graphic)),
         objOptions = isFunction$1(options) ? options.call(null, null !== (_b = customParams && (null === (_a = customParams.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParams) : options;
       customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
     } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
@@ -32633,6 +32643,14 @@ class AnimationStateManager {
       state.executor.stop();
     }), this.stateList = null;
   }
+  reApplyState(state) {
+    var _a;
+    const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
+    if (stateInfo) {
+      const stateList = this.stateList.slice();
+      stateInfo.executor.stop(), this.stateList = stateList, stateInfo.executor.execute(stateInfo.animationConfig);
+    }
+  }
 }
 
 class GraphicStateExtension {
@@ -32663,11 +32681,20 @@ class GraphicStateExtension {
   applyUnhighlightState(animationConfig, callback) {
     return this._getAnimationStateManager(this).applyUnhighlightState(animationConfig, callback), this;
   }
-  stopAnimationState(state, type) {
-    return this._getAnimationStateManager(this).stopState(state, type), this;
+  stopAnimationState(state, type, deep = !1) {
+    return this._getAnimationStateManager(this).stopState(state, type), deep && this.isContainer && this.forEachChildren(child => {
+      child.stopAnimationState(state, type, deep);
+    }), this;
   }
   clearAnimationStates() {
-    return this._getAnimationStateManager(this).clearState(), this;
+    const stateManager = this._animationStateManager;
+    return stateManager && stateManager.clearState(), this;
+  }
+  reApplyAnimationState(state, deep = !1) {
+    const stateManager = this._animationStateManager;
+    return stateManager && stateManager.reApplyState(state), deep && this.isContainer && this.forEachChildren(child => {
+      child.reApplyAnimationState(state, deep);
+    }), this;
   }
   static extend(graphic) {
     return new GraphicStateExtension()._getAnimationStateManager(graphic), graphic;
@@ -32680,7 +32707,6 @@ class AnimateExtension {
   }
   animate(params) {
     var _a, _b, _c;
-    this.animates || (this.animates = new Map());
     const animate = new Animate(null == params ? void 0 : params.id, null !== (_b = null !== (_a = null == params ? void 0 : params.timeline) && void 0 !== _a ? _a : this.stage && this.stage.getTimeline()) && void 0 !== _b ? _b : defaultTimeline, null == params ? void 0 : params.slience);
     if (animate.bind(this), params) {
       const {
@@ -32690,9 +32716,7 @@ class AnimateExtension {
       } = params;
       null != onStart && animate.onStart(onStart), null != onEnd && animate.onEnd(onEnd), null != onRemove && animate.onRemove(onRemove);
     }
-    return this.animates.set(animate.id, animate), animate.onRemove(() => {
-      animate.stop(), this.animates.delete(animate.id);
-    }), null === (_c = this.stage) || void 0 === _c || _c.ticker.start(), animate;
+    return null === (_c = this.stage) || void 0 === _c || _c.ticker.start(), animate;
   }
   createTimeline() {
     return new DefaultTimeline();
@@ -32723,6 +32747,21 @@ class AnimateExtension {
   getGraphicAttribute(key, prev = !1) {
     return !prev && this.finalAttribute ? this.finalAttribute[key] : this.attribute[key];
   }
+  pauseAnimation(deep = !1) {
+    this.animates && this.animates.forEach(animate => animate.pause()), deep && this.isContainer && this.forEachChildren(child => {
+      child.pauseAnimation(deep);
+    });
+  }
+  resumeAnimation(deep = !1) {
+    this.animates && this.animates.forEach(animate => animate.resume()), deep && this.isContainer && this.forEachChildren(child => {
+      child.resumeAnimation(deep);
+    });
+  }
+  stopAnimation(deep = !1) {
+    this.animates && this.animates.forEach(animate => animate.stop()), deep && this.isContainer && this.forEachChildren(child => {
+      child.stopAnimation(deep);
+    });
+  }
 }
 
 function registerAnimate$1() {
@@ -32731,7 +32770,7 @@ function registerAnimate$1() {
 
 class ACustomAnimate extends Step {
   constructor(customFrom, customTo, duration, easing, params) {
-    super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params;
+    super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params, this.from = customFrom, this.to = customTo;
   }
   update(end, ratio, out) {
     if (this.onStart(), !this.props || !this.propKeys) return;
@@ -33651,7 +33690,7 @@ class GrowAngleBase extends ACustomAnimate {
 }
 class GrowAngleIn extends GrowAngleBase {
   onBind() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onBind();
     const {
         from: from,
@@ -33660,7 +33699,7 @@ class GrowAngleIn extends GrowAngleBase {
       fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
     this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
     const finalAttribute = this.target.getFinalAttribute();
-    finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs), this.determineUpdateFunction();
+    finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs), this.determineUpdateFunction();
   }
 }
 class GrowAngleOut extends GrowAngleBase {
@@ -33803,7 +33842,7 @@ class GrowCenterIn extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onBind() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onBind();
     const {
         from: from,
@@ -33812,7 +33851,7 @@ class GrowCenterIn extends ACustomAnimate {
       fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
     this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
     const finalAttribute = this.target.getFinalAttribute();
-    finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
+    finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
   }
   onEnd(cb) {
     super.onEnd(cb);
@@ -33910,7 +33949,7 @@ class GrowHeightIn extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onBind() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onBind();
     const {
         from: from,
@@ -33919,7 +33958,7 @@ class GrowHeightIn extends ACustomAnimate {
       fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
     this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
     const finalAttribute = this.target.getFinalAttribute();
-    finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
+    finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
   }
   onEnd(cb) {
     super.onEnd(cb);
@@ -34268,7 +34307,7 @@ class GrowPointsBase extends ACustomAnimate {
 }
 class GrowRadiusIn extends GrowPointsBase {
   onBind() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onBind();
     const {
         from: from,
@@ -34277,7 +34316,7 @@ class GrowRadiusIn extends GrowPointsBase {
       fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
     this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
     const finalAttribute = this.target.getFinalAttribute();
-    finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
+    finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
   }
 }
 class GrowRadiusOut extends GrowPointsBase {
@@ -34392,7 +34431,7 @@ class GrowWidthIn extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onBind() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onBind();
     const {
         from: from,
@@ -34401,7 +34440,7 @@ class GrowWidthIn extends ACustomAnimate {
       fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
     this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
     const finalAttribute = this.target.getFinalAttribute();
-    finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
+    finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
   }
   onEnd(cb) {
     super.onEnd(cb);
@@ -35770,16 +35809,15 @@ const moveIn = (graphic, options, animationParameters) => {
     changedY = 0;
   "negative" === orient && (changedX = null !== (_a = layoutRect.width) && void 0 !== _a ? _a : graphic.stage.viewWidth, changedY = null !== (_b = layoutRect.height) && void 0 !== _b ? _b : graphic.stage.viewHeight), changedX += offset, changedY += offset;
   const point = isFunction$1(pointOpt) ? pointOpt.call(null, null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, animationParameters) : pointOpt,
-    fromX = point && isValidNumber$1(point.x) ? point.x : changedX,
-    fromY = point && isValidNumber$1(point.y) ? point.y : changedY,
-    finalAttrs = graphic.getFinalAttribute(),
-    finalAttrsX = excludeChannels.includes("x") ? graphic.attribute.x : finalAttrs.x,
-    finalAttrsY = excludeChannels.includes("y") ? graphic.attribute.y : finalAttrs.y;
+    finalAttrsX = graphic.getGraphicAttribute("x"),
+    finalAttrsY = graphic.getGraphicAttribute("y"),
+    fromX = excludeChannels.includes("x") ? finalAttrsX : point && isValidNumber$1(point.x) ? point.x : changedX,
+    fromY = excludeChannels.includes("y") ? finalAttrsY : point && isValidNumber$1(point.y) ? point.y : changedY;
   switch (direction) {
     case "x":
       return {
         from: {
-          x: fromX
+          x: excludeChannels.includes("x") ? finalAttrsX : fromX
         },
         to: {
           x: finalAttrsX
@@ -35808,25 +35846,26 @@ const moveIn = (graphic, options, animationParameters) => {
   }
 };
 const moveOut = (graphic, options, animationParameters) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d;
   const {
       offset = 0,
       orient: orient,
       direction: direction,
       point: pointOpt
     } = null != options ? options : {},
-    groupWidth = null !== (_b = null === (_a = options.layoutRect) || void 0 === _a ? void 0 : _a.width) && void 0 !== _b ? _b : graphic.stage.viewWidth,
-    groupHeight = null !== (_d = null === (_c = options.layoutRect) || void 0 === _c ? void 0 : _c.height) && void 0 !== _d ? _d : graphic.stage.viewHeight,
+    groupBounds = animationParameters.group ? animationParameters.group.AABBBounds : null,
+    groupWidth = null !== (_a = groupBounds.width()) && void 0 !== _a ? _a : animationParameters.width,
+    groupHeight = null !== (_b = groupBounds.height()) && void 0 !== _b ? _b : animationParameters.height,
     changedX = ("negative" === orient ? groupWidth : 0) + offset,
     changedY = ("negative" === orient ? groupHeight : 0) + offset,
-    point = isFunction$1(pointOpt) ? pointOpt.call(null, null === (_f = null === (_e = graphic.context) || void 0 === _e ? void 0 : _e.data) || void 0 === _f ? void 0 : _f[0], graphic, animationParameters) : pointOpt,
+    point = isFunction$1(pointOpt) ? pointOpt.call(null, null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, animationParameters) : pointOpt,
     fromX = point && isValidNumber$1(point.x) ? point.x : changedX,
     fromY = point && isValidNumber$1(point.y) ? point.y : changedY;
   switch (direction) {
     case "x":
       return {
         from: {
-          x: graphic.attribute.x
+          x: graphic.getGraphicAttribute("x")
         },
         to: {
           x: fromX
@@ -35835,7 +35874,7 @@ const moveOut = (graphic, options, animationParameters) => {
     case "y":
       return {
         from: {
-          y: graphic.attribute.y
+          y: graphic.getGraphicAttribute("y")
         },
         to: {
           y: fromY
@@ -35844,8 +35883,8 @@ const moveOut = (graphic, options, animationParameters) => {
     default:
       return {
         from: {
-          x: graphic.attribute.x,
-          y: graphic.attribute.y
+          x: graphic.getGraphicAttribute("x"),
+          y: graphic.getGraphicAttribute("y")
         },
         to: {
           x: fromX,
@@ -35992,6 +36031,9 @@ class FromTo extends ACustomAnimate {
       this.from[key] = null !== (_a = this.from[key]) && void 0 !== _a ? _a : startProps[key];
     }), this.target.setAttributes(this.from);
   }
+  deleteSelfAttr(key) {
+    super.deleteSelfAttr(key), delete this.from[key];
+  }
   update(end, ratio, out) {
     if (this.onStart(), !this.props || !this.propKeys) return;
     const easedRatio = this.easing(ratio);
@@ -36060,9 +36102,8 @@ class StreamLight extends ACustomAnimate {
         w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX),
         width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
       this.rect.setAttributes({
-        x: x,
-        width: width,
-        dx: Math.min(parentAttr.x1 - parentAttr.x, 0)
+        x: x + Math.min(parentAttr.x1 - parentAttr.x, 0),
+        width: width
       }, !1, {
         type: AttributeUpdateType.ANIMATE_PLAY,
         animationState: {
@@ -36079,9 +36120,8 @@ class StreamLight extends ACustomAnimate {
       const h = Math.min(parentHeight - currentY, maxLength);
       let height;
       y <= 0 ? (height = Math.max(y + h, 0), y = 0) : height = h, this.rect.setAttributes({
-        y: y,
-        height: height,
-        dy: Math.min(parentAttr.y1 - parentAttr.y, 0)
+        y: y + Math.min(parentAttr.y1 - parentAttr.y, 0),
+        height: height
       }, !1, {
         type: AttributeUpdateType.ANIMATE_PLAY,
         animationState: {
@@ -37298,7 +37338,9 @@ class BandScale extends OrdinalScale {
       space = bandSpace(n, this._paddingInner, this._paddingOuter);
     return this._step = (stop - start) / Math.max(1, space || 1), this._round && (this._step = Math.floor(this._step)), start += (stop - start - this._step * (n - this._paddingInner)) * this._align, this.isBandwidthFixed() || (this._bandwidth = this._step * (1 - this._paddingInner)), this._round && (start = Math.round(start), this.isBandwidthFixed() || (this._bandwidth = Math.round(this._bandwidth))), this._bandRangeState = {
       reverse: reverse,
-      start: reverse ? start + this._step * (n - 1) : start,
+      start: reverse ? clamp$1(start + this._step * (n - 1), wholeRange[1], wholeRange[0]) : clamp$1(start, wholeRange[0], wholeRange[1]),
+      min: reverse ? wholeRange[1] : wholeRange[0],
+      max: stop,
       count: n
     }, this.generateFishEyeTransform(), this;
   }
@@ -37315,10 +37357,12 @@ class BandScale extends OrdinalScale {
     const {
         count: count,
         start: start,
-        reverse: reverse
+        reverse: reverse,
+        min: min,
+        max: max
       } = this._bandRangeState,
       output = start + (reverse ? -1 : 1) * ((i - 1) % count) * this._step;
-    return this._fishEyeTransform ? this._fishEyeTransform(output) : output;
+    return clamp$1(this._fishEyeTransform ? this._fishEyeTransform(output) : output, min, max);
   }
   _calculateWholeRange(range, changeProperty) {
     if (this._wholeRange) return this._wholeRange;
@@ -38773,7 +38817,8 @@ class LabelUpdate extends AComponentAnimate {
         prevText: prevText,
         curText: curText,
         prevLabelLine: prevLabelLine,
-        curLabelLine: curLabelLine
+        curLabelLine: curLabelLine,
+        increaseEffect = !0
       } = this.params,
       diff = {};
     for (const key in curText.attribute) prevText.attribute[key] !== curText.attribute[key] && (diff[key] = curText.attribute[key]);
@@ -38783,7 +38828,7 @@ class LabelUpdate extends AComponentAnimate {
       to: rest,
       duration: duration,
       easing: easing
-    }), animator.animate(prevText, {
+    }), !1 !== increaseEffect && animator.animate(prevText, {
       type: "increaseCount",
       to: {
         text: curText.attribute.text
@@ -39477,16 +39522,15 @@ class LabelBase extends AnimateComponent {
       } = currentLabel;
     prevText.applyAnimationState(["update"], [{
       name: "update",
-      animation: Object.assign(Object.assign({
-        type: "labelUpdate"
-      }, this._animationConfig.update), {
-        customParameters: {
+      animation: {
+        type: "labelUpdate",
+        customParameters: Object.assign(Object.assign({}, this._animationConfig.update), {
           prevText: prevText,
           curText: curText,
           prevLabelLine: prevLabelLine,
           curLabelLine: curLabelLine
-        }
-      })
+        })
+      }
     }]);
   }
   _syncStateWithRelatedGraphic(relatedGraphic) {
@@ -47245,6 +47289,22 @@ function field$1(f) {
         return value;
     };
 }
+function removeUndefined(obj, deep = false) {
+    if (obj === null || typeof obj !== 'object') {
+        return obj;
+    }
+    for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            if (obj[key] === undefined) {
+                delete obj[key];
+                continue;
+            }
+            if (deep) {
+                removeUndefined(obj[key], deep);
+            }
+        }
+    }
+}
 
 var SeriesTypeForThemeEnum;
 (function (SeriesTypeForThemeEnum) {
@@ -47285,7 +47345,6 @@ var SeriesTypeEnum;
     SeriesTypeEnum["dot"] = "dot";
     SeriesTypeEnum["geo"] = "geo";
     SeriesTypeEnum["link"] = "link";
-    SeriesTypeEnum["curveLink"] = "curveLink";
     SeriesTypeEnum["map"] = "map";
     SeriesTypeEnum["pie"] = "pie";
     SeriesTypeEnum["radar"] = "radar";
@@ -47340,8 +47399,6 @@ var SeriesMarkNameEnum;
     SeriesMarkNameEnum["cell"] = "cell";
     SeriesMarkNameEnum["cellBackground"] = "cellBackground";
     SeriesMarkNameEnum["link"] = "link";
-    SeriesMarkNameEnum["curveLink"] = "curveLink";
-    SeriesMarkNameEnum["imageLabel"] = "imageLabel";
     SeriesMarkNameEnum["arrow"] = "arrow";
     SeriesMarkNameEnum["pie"] = "pie";
     SeriesMarkNameEnum["labelLine"] = "labelLine";
@@ -49107,6 +49164,16 @@ const findMarkGraphic = (rootGroup, target) => {
     }
     return null;
 };
+const getDiffAttributesOfGraphic = (g, newAttrs) => {
+    const prevAttrs = g.getAttributes(true);
+    const diffAttrs = {};
+    Object.keys(newAttrs).forEach(key => {
+        if (prevAttrs[key] !== newAttrs[key]) {
+            diffAttrs[key] = newAttrs[key];
+        }
+    });
+    return diffAttrs;
+};
 
 let Event$1 = class Event {
     getComposedEventMap() {
@@ -50008,6 +50075,28 @@ const runEncoder = (styles, datum, attrs = {}) => {
     return attrs;
 };
 
+function toRenderMode(mode) {
+    switch (mode) {
+        case RenderModeEnum['desktop-browser']:
+        case RenderModeEnum['mobile-browser']:
+            return 'browser';
+        case RenderModeEnum.node:
+        case RenderModeEnum.worker:
+            return 'node';
+        case RenderModeEnum.miniApp:
+        case RenderModeEnum['desktop-miniApp']:
+            return 'feishu';
+        case RenderModeEnum.lynx:
+            return 'lynx';
+        case RenderModeEnum.wx:
+            return 'wx';
+        case RenderModeEnum.tt:
+            return 'tt';
+        case RenderModeEnum.harmony:
+            return 'harmony';
+    }
+    return 'browser';
+}
 function traverseGroupMark(group, apply, filter, leafFirst, stop) {
     const traverse = (mark) => {
         if (!leafFirst) {
@@ -50181,6 +50270,9 @@ class Compiler {
         this._container = container;
         this._option = option;
     }
+    getChart() {
+        return this._compileChart;
+    }
     getCanvas() {
         var _a;
         return (_a = this._stage) === null || _a === void 0 ? void 0 : _a.window.getNativeHandler().nativeCanvas;
@@ -50189,7 +50281,7 @@ class Compiler {
         return this._stage;
     }
     initView() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (this._released) {
             return;
         }
@@ -50197,34 +50289,17 @@ class Compiler {
         if (this._stage) {
             return;
         }
-        const { autoRefreshDpr, dpr, mode, gestureConfig, interactive, clickInterval, autoPreventDefault, background } = this._option;
+        const { autoRefreshDpr, dpr, mode, modeParams, gestureConfig, interactive, clickInterval, autoPreventDefault, background } = this._option;
+        vglobal.setEnv(toRenderMode(mode), modeParams !== null && modeParams !== void 0 ? modeParams : {});
         this._stage =
-            (_a = this._option.stage) !== null && _a !== void 0 ? _a : new Stage({
-                background,
-                width: this._width,
-                height: this._height,
-                container: (_b = this._container.dom) !== null && _b !== void 0 ? _b : null,
-                canvas: (_c = this._container.canvas) !== null && _c !== void 0 ? _c : null,
-                dpr,
-                viewBox: this._option.viewBox,
-                canvasControled: this._option.canvasControled,
-                beforeRender: this._option.beforeRender,
-                afterRender: this._option.afterRender,
-                disableDirtyBounds: true,
-                autoRender: true,
-                ticker: this._option.ticker,
-                pluginList: this._option.pluginList,
-                enableHtmlAttribute: this._option.enableHtmlAttribute,
-                optimize: this._option.optimize,
-                supportsTouchEvents: this._option.supportsTouchEvents,
-                supportsPointerEvents: this._option.supportsPointerEvents,
-                event: {
+            (_a = this._option.stage) !== null && _a !== void 0 ? _a : new Stage(Object.assign({ background, width: this._width, height: this._height, container: (_b = this._container.dom) !== null && _b !== void 0 ? _b : null, canvas: (_c = this._container.canvas) !== null && _c !== void 0 ? _c : null, dpr, viewBox: this._option.viewBox, canvasControled: this._option.canvasControled, beforeRender: (stage) => {
+                    var _a, _b, _c;
+                    (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.onBeforeRender();
+                    (_c = (_b = this._option).beforeRender) === null || _c === void 0 ? void 0 : _c.call(_b, stage);
+                }, afterRender: this._option.afterRender, disableDirtyBounds: true, autoRender: true, ticker: this._option.ticker, pluginList: this._option.pluginList, enableHtmlAttribute: this._option.enableHtmlAttribute, optimize: this._option.optimize, supportsTouchEvents: this._option.supportsTouchEvents, supportsPointerEvents: this._option.supportsPointerEvents, event: {
                     clickInterval: clickInterval,
                     autoPreventDefault: autoPreventDefault
-                },
-                ReactDOM: this._option.ReactDOM,
-                autoRefresh: isValid$1(autoRefreshDpr) ? autoRefreshDpr : !isValid$1(dpr)
-            });
+                }, ReactDOM: this._option.ReactDOM, autoRefresh: isValid$1(autoRefreshDpr) ? autoRefreshDpr : !isValid$1(dpr) }, ((_d = this._option.renderHooks) !== null && _d !== void 0 ? _d : {})));
         this._stage.enableIncrementalAutoRender();
         this._stage.setTheme({
             symbol: {
@@ -51055,6 +51130,8 @@ class BaseModel extends CompilableBase {
     }
     onEvaluateEnd(ctx) {
     }
+    onBeforeRender() {
+    }
     onDataUpdate() {
     }
     beforeRelease() {
@@ -51182,6 +51259,12 @@ class BaseModel extends CompilableBase {
         }
         return index;
     }
+    updateAnimateStateCallback(callback) {
+        this._aniamtionStateCallback = callback;
+    }
+    getAnimationStateCallback() {
+        return this._aniamtionStateCallback;
+    }
 }
 
 class LayoutItem {
@@ -53205,26 +53288,39 @@ class BaseMark extends GrammarItem {
     }
     setAnimationConfig(config) {
         const defaultPrams = this.type === 'group' ? { selfOnly: true } : {};
+        const formatAnimationCfg = (cfg) => {
+            var _a;
+            const options = (_a = cfg.options) !== null && _a !== void 0 ? _a : {};
+            return Object.assign(Object.assign(Object.assign({}, defaultPrams), cfg), { options: (datum, graphic, customParams) => {
+                    var _a, _b;
+                    const _options = typeof options === 'function' ? options(datum, graphic, customParams) : options;
+                    if (graphic && graphic.context && graphic.context.compiler && isValid$1(graphic.context.modelId)) {
+                        const model = (_a = graphic.context.compiler.getChart()) === null || _a === void 0 ? void 0 : _a.getModelById(graphic.context.modelId);
+                        return Object.assign(Object.assign({}, _options), { layoutRect: (_b = model === null || model === void 0 ? void 0 : model.getLayoutRect) === null || _b === void 0 ? void 0 : _b.call(model) });
+                    }
+                    return Object.assign({}, _options);
+                } });
+        };
         const animationConfig = {};
         Object.keys(config).forEach(key => {
             const value = config[key];
             if (isArray$1(value)) {
-                animationConfig[key] = value.map(item => {
-                    var _a;
-                    const options = (_a = item.options) !== null && _a !== void 0 ? _a : {};
-                    return Object.assign(Object.assign(Object.assign({}, defaultPrams), item), { options: (...args) => {
-                            var _a, _b;
-                            const _options = typeof options === 'function' ? options(...args) : options;
-                            return Object.assign(Object.assign({}, _options), { layoutRect: (_b = (_a = this.model).getLayoutRect) === null || _b === void 0 ? void 0 : _b.call(_a) });
-                        } });
-                });
+                animationConfig[key] = value.map(formatAnimationCfg);
             }
-            else {
-                animationConfig[key] = Object.assign(Object.assign({}, defaultPrams), config[key]);
+            else if (isValid$1(value)) {
+                animationConfig[key] = formatAnimationCfg(value);
             }
         });
         this._animationConfig = animationConfig;
     }
+    disableAnimationByState(state) {
+        const states = array(state);
+        this._disabledAnimationStates = [...new Set([...this._disabledAnimationStates, ...states])];
+    }
+    enableAnimationByState(state) {
+        const states = array(state);
+        this._disabledAnimationStates = this._disabledAnimationStates.filter(s => !states.includes(s));
+    }
     setSkipBeforeLayouted(skip) {
         this._skipBeforeLayouted = skip;
     }
@@ -53359,6 +53455,7 @@ class BaseMark extends GrammarItem {
         this._visible = true;
         this.stateStyle = {};
         this._unCompileChannel = {};
+        this._disabledAnimationStates = [];
         this._skipBeforeLayouted = false;
         this._extensionChannel = {};
         this._computeExChannel = {};
@@ -53776,6 +53873,7 @@ class BaseMark extends GrammarItem {
     }
     _getCommonContext() {
         return {
+            compiler: this.getCompiler(),
             markType: this.type,
             markId: this.id,
             modelId: this.model.id,
@@ -53849,17 +53947,19 @@ class BaseMark extends GrammarItem {
         this._dataByGroup = groupData(data, this._groupKeyGetter);
     }
     createAnimationStateList(type, animationConfig) {
+        var _a;
         let config = animationConfig[type];
         if (config && Array.isArray(config)) {
             config = config.length === 1 ? config[0] : config;
         }
         if (Array.isArray(config)) {
-            config = config.map((item, index) => {
+            return config.map((item, index) => {
                 var _a;
                 return (Object.assign(Object.assign({}, item), { priority: (_a = item.priority) !== null && _a !== void 0 ? _a : Infinity }));
             });
         }
-        return config;
+        return config
+            ? Object.assign(Object.assign({}, config), { priority: type === 'normal' ? (_a = config.priority) !== null && _a !== void 0 ? _a : Infinity : config.priority }) : config;
     }
     tryRunMorphing(graphics) {
         if (this._lastMark) {
@@ -53943,13 +54043,34 @@ class BaseMark extends GrammarItem {
             this._product.applyAnimationState(['normal'], [normalConfig]);
         }
     }
+    _setAnimationState(g) {
+        var _a, _b, _c;
+        const callback = (this.type === "component"
+            ? this.model.getAnimationStateCallback()
+            : (_c = (_b = (_a = this.model).getRegion) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.getAnimationStateCallback()) ||
+            ((g) => {
+                var _a;
+                const diffState = (_a = g.context) === null || _a === void 0 ? void 0 : _a.diffState;
+                return diffState === AnimationStateEnum.exit
+                    ? AnimationStateEnum.exit
+                    : diffState === AnimationStateEnum.update
+                        ? AnimationStateEnum.update
+                        : AnimationStateEnum.appear;
+            });
+        const customizedState = callback(g);
+        g.context.animationState = customizedState !== null && customizedState !== void 0 ? customizedState : g.context.diffState;
+        if (g.context.animationState === DiffState.exit) {
+            g.context.reusing = true;
+            g.animates && g.animates.forEach((a) => a.stop());
+        }
+    }
     _runJoin(data) {
         const newGroupedData = this._getDataByKey(data);
         const prevGroupedData = this._prevDataByKey;
-        const newGraphics = [];
+        const allGraphics = [];
         const enterGraphics = new Set(this._graphics.filter(g => g.context.diffState === DiffState.enter));
         const callback = (key, newData, prevData) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             let g;
             let diffState;
             if (isNil$1(newData)) {
@@ -53967,23 +54088,20 @@ class BaseMark extends GrammarItem {
                 }
                 diffState = DiffState.enter;
                 g.isExiting = false;
-                if (((_a = g.context) === null || _a === void 0 ? void 0 : _a.diffState) === DiffState.exit) {
-                    g.context.reusing = true;
-                    g.animates && g.animates.forEach((a) => a.stop());
-                }
                 this._graphicMap.set(key, g);
-                newGraphics.push(g);
+                allGraphics.push(g);
             }
             else {
                 g = this._graphicMap.get(key);
                 if (g) {
                     diffState = DiffState.update;
-                    newGraphics.push(g);
+                    allGraphics.push(g);
                 }
             }
             if (g) {
-                g.context = Object.assign(Object.assign({}, this._getCommonContext()), { diffState, reusing: (_b = g.context) === null || _b === void 0 ? void 0 : _b.reusing, originalFieldX: (_c = g.context) === null || _c === void 0 ? void 0 : _c.originalFieldX, originalFieldY: (_d = g.context) === null || _d === void 0 ? void 0 : _d.originalFieldY, fieldX: (_e = g.context) === null || _e === void 0 ? void 0 : _e.fieldX, fieldY: (_f = g.context) === null || _f === void 0 ? void 0 : _f.fieldY, animationState: diffState, data: newData !== null && newData !== void 0 ? newData : (_g = g.context) === null || _g === void 0 ? void 0 : _g.data, uniqueKey: key, key: newData ? this._keyGetter(newData[0]) : (_h = g.context) === null || _h === void 0 ? void 0 : _h.key, groupKey: newData ? this._groupKeyGetter(newData[0]) : (_j = g.context) === null || _j === void 0 ? void 0 : _j.groupKey, indexKey: '__VCHART_DEFAULT_DATA_INDEX', stateAnimateConfig: (_k = this.getAnimationConfig()) === null || _k === void 0 ? void 0 : _k.state });
                 enterGraphics.delete(g);
+                g.context = Object.assign(Object.assign({}, this._getCommonContext()), { diffState, reusing: (_a = g.context) === null || _a === void 0 ? void 0 : _a.reusing, originalFieldX: (_b = g.context) === null || _b === void 0 ? void 0 : _b.originalFieldX, originalFieldY: (_c = g.context) === null || _c === void 0 ? void 0 : _c.originalFieldY, fieldX: (_d = g.context) === null || _d === void 0 ? void 0 : _d.fieldX, fieldY: (_e = g.context) === null || _e === void 0 ? void 0 : _e.fieldY, data: newData !== null && newData !== void 0 ? newData : (_f = g.context) === null || _f === void 0 ? void 0 : _f.data, uniqueKey: key, key: newData ? this._keyGetter(newData[0]) : (_g = g.context) === null || _g === void 0 ? void 0 : _g.key, groupKey: newData ? this._groupKeyGetter(newData[0]) : (_h = g.context) === null || _h === void 0 ? void 0 : _h.groupKey, indexKey: '__VCHART_DEFAULT_DATA_INDEX', stateAnimateConfig: (_j = this.getAnimationConfig()) === null || _j === void 0 ? void 0 : _j.state });
+                this._setAnimationState(g);
             }
             return g;
         };
@@ -54021,13 +54139,13 @@ class BaseMark extends GrammarItem {
             }
             g.release();
         });
-        const graphicCount = newGraphics.length;
-        newGraphics.forEach((g, index) => {
+        const graphicCount = allGraphics.length;
+        allGraphics.forEach((g, index) => {
             g.context.graphicCount = graphicCount;
             g.context.graphicIndex = index;
         });
         this._dataByKey = newGroupedData;
-        this._graphics = newGraphics;
+        this._graphics = allGraphics;
         this.needClear = true;
     }
     _runEncoderOfGraphic(styles, g, attrs = {}) {
@@ -54110,13 +54228,7 @@ class BaseMark extends GrammarItem {
                 }
             }
             else {
-                const prevAttrs = g.getAttributes(true);
-                const diffAttrs = {};
-                Object.keys(finalAttrs).forEach(key => {
-                    if (prevAttrs[key] !== finalAttrs[key]) {
-                        diffAttrs[key] = finalAttrs[key];
-                    }
-                });
+                const diffAttrs = getDiffAttributesOfGraphic(g, finalAttrs);
                 g.context.diffAttrs = diffAttrs;
                 if (g.context.reusing) {
                     g.context.lastAttrs = g.attribute;
@@ -54285,24 +54397,25 @@ class BaseMark extends GrammarItem {
             }
         };
         this._graphicMap.forEach((g, key) => {
-            if (g.context.diffState === DiffState.exit && !g.isExiting) {
-                if (this.hasAnimationByState('exit')) {
-                    g.isExiting = true;
-                    const animationConfig = this.getAnimationConfig();
-                    if (animationConfig.exit && animationConfig.exit.length) {
-                        const exitConfigList = animationConfig.exit.map((item, index) => ({
-                            name: `exit_${index}`,
-                            animation: Object.assign(Object.assign({}, item), { customParameters: g.context })
-                        }));
-                        g.applyAnimationState(['exit'], [exitConfigList.length === 1 ? exitConfigList[0] : exitConfigList], () => {
-                            doRemove(g, key);
-                        });
-                    }
-                }
-                else {
-                    doRemove(g, key);
+            if (g.context.diffState !== DiffState.exit || g.isExiting) {
+                return;
+            }
+            if (g.context.animationState === DiffState.exit && this.hasAnimationByState('exit')) {
+                g.isExiting = true;
+                const animationConfig = this.getAnimationConfig();
+                if (animationConfig.exit && animationConfig.exit.length) {
+                    const exitConfigList = animationConfig.exit.map((item, index) => ({
+                        name: `exit_${index}`,
+                        animation: Object.assign(Object.assign({}, item), { customParameters: g.context })
+                    }));
+                    g.applyAnimationState(['exit'], [exitConfigList.length === 1 ? exitConfigList[0] : exitConfigList], () => {
+                        doRemove(g, key);
+                    });
                 }
             }
+            else {
+                doRemove(g, key);
+            }
         });
     }
     isProgressive() {
@@ -54447,15 +54560,11 @@ class BaseMark extends GrammarItem {
             this._runProgressiveStep();
         }
     }
-    updateAnimationState(callback) {
-        if (this._graphics && this._graphics.length) {
-            this._graphics.forEach(g => {
-                g.context.animationState = callback(g);
-            });
-        }
-    }
     hasAnimationByState(state) {
-        if (!state || !this._animationConfig || !this._animationConfig[state]) {
+        if (!state ||
+            !this._animationConfig ||
+            !this._animationConfig[state] ||
+            this._disabledAnimationStates.includes(state)) {
             return false;
         }
         const stateAnimationConfig = this._animationConfig[state];
@@ -54472,11 +54581,36 @@ class BaseMark extends GrammarItem {
     }
 }
 
+var MarkTypeEnum;
+(function (MarkTypeEnum) {
+    MarkTypeEnum["group"] = "group";
+    MarkTypeEnum["symbol"] = "symbol";
+    MarkTypeEnum["rule"] = "rule";
+    MarkTypeEnum["line"] = "line";
+    MarkTypeEnum["text"] = "text";
+    MarkTypeEnum["rect"] = "rect";
+    MarkTypeEnum["image"] = "image";
+    MarkTypeEnum["path"] = "path";
+    MarkTypeEnum["area"] = "area";
+    MarkTypeEnum["arc"] = "arc";
+    MarkTypeEnum["polygon"] = "polygon";
+    MarkTypeEnum["boxPlot"] = "boxPlot";
+    MarkTypeEnum["linkPath"] = "linkPath";
+    MarkTypeEnum["cell"] = "cell";
+    MarkTypeEnum["ripple"] = "ripple";
+    MarkTypeEnum["liquid"] = "liquid";
+    MarkTypeEnum["component"] = "component";
+    MarkTypeEnum["dataLabel"] = "dataLabel";
+    MarkTypeEnum["label"] = "label";
+    MarkTypeEnum["pictogram"] = "pictogram";
+})(MarkTypeEnum || (MarkTypeEnum = {}));
+
 class GroupMark extends BaseMark {
     constructor() {
         super(...arguments);
         this.type = GroupMark.type;
         this._marks = [];
+        this._diffState = DiffState.enter;
     }
     getMarks() {
         return this._marks;
@@ -54539,10 +54673,28 @@ class GroupMark extends BaseMark {
             return;
         }
         const style = (_a = this._simpleStyle) !== null && _a !== void 0 ? _a : this.getAttributesOfState({});
-        this._product.context = Object.assign(Object.assign({}, this._product.context), this._getCommonContext());
-        this._product.setAttributes(this._getAttrsFromConfig(style));
+        this._product.context = Object.assign(Object.assign(Object.assign({}, this._product.context), this._getCommonContext()), { diffState: this._diffState });
+        this._setAnimationState(this._product);
+        const newAttrs = this._getAttrsFromConfig(style);
+        if (this._product.context.diffState === DiffState.update) {
+            const hasAnimation = this.hasAnimation();
+            const diffAttrs = getDiffAttributesOfGraphic(this._product, newAttrs);
+            this._product.context.diffAttrs = diffAttrs;
+            if (!this.hasAnimationByState(this._product.context.animationState)) {
+                hasAnimation ? this._product.setAttributesAndPreventAnimate(diffAttrs) : this._product.setAttributes(diffAttrs);
+            }
+            if (hasAnimation) {
+                this._product.setFinalAttributes(newAttrs);
+            }
+        }
+        else {
+            this._product.setAttributes(newAttrs);
+        }
         this.needClear = true;
     }
+    clearExitGraphics() {
+        this._diffState = DiffState.update;
+    }
     render() {
         if (this._isCommited) {
             log(`render mark: ${this.getProductId()}, type is ${this.type}`);
@@ -54553,16 +54705,6 @@ class GroupMark extends BaseMark {
             mark.render();
         });
     }
-    updateAnimationState(callback) {
-        this.getGraphics().forEach(g => {
-            if (g) {
-                g.context = Object.assign(Object.assign({}, g.context), { animationState: callback(g) });
-            }
-        });
-        this.getMarks().forEach(mark => {
-            mark.updateAnimationState(callback);
-        });
-    }
     release() {
         super.release();
         this.removeProduct();
@@ -55460,7 +55602,6 @@ class VChart {
             if (!this._beforeRender(option)) {
                 return self;
             }
-            this._updateAnimateState(true);
             (_a = this._compiler) === null || _a === void 0 ? void 0 : _a.render(option.morphConfig);
             this._updateAnimateState(false);
             this._afterRender();
@@ -55532,7 +55673,8 @@ class VChart {
             this._cachedProcessedTheme[cacheKey] = theme;
             return theme;
         };
-        this._option = Object.assign(Object.assign(Object.assign({}, this._option), { animation: spec.animation !== false }), options);
+        removeUndefined(options);
+        this._option = Object.assign(Object.assign({}, this._option), options);
         if (options === null || options === void 0 ? void 0 : options.optimize) {
             this._option.optimize = Object.assign(Object.assign({}, this._option.optimize), options.optimize);
         }
@@ -55757,7 +55899,7 @@ class VChart {
         return this._beforeRender(option);
     }
     _reCompile(updateResult, morphConfig) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (updateResult.reMake) {
             this._releaseData();
             this._initDataSet();
@@ -55777,20 +55919,16 @@ class VChart {
         if (updateResult.reMake) {
             (_c = this._compiler) === null || _c === void 0 ? void 0 : _c.releaseGrammar();
             this._userEvents.forEach(e => { var _a; return (_a = this._event) === null || _a === void 0 ? void 0 : _a.on(e.eType, e.query, e.handler); });
-            if (updateResult.reSize) {
-                this._doResize();
-            }
         }
-        else {
-            if (updateResult.reCompile) {
-                (_d = this._compiler) === null || _d === void 0 ? void 0 : _d.clear({ chart: this._chart, vChart: this });
-                (_e = this._compiler) === null || _e === void 0 ? void 0 : _e.compile({ chart: this._chart, vChart: this });
-            }
-            if (updateResult.reSize) {
-                const { width, height } = this.getCurrentSize();
-                this._chart.onResize(width, height, false);
-                this._compiler.resize(width, height, false);
-            }
+        else if (updateResult.reCompile) {
+            (_d = this._compiler) === null || _d === void 0 ? void 0 : _d.clear({ chart: this._chart, vChart: this });
+            (_e = this._compiler) === null || _e === void 0 ? void 0 : _e.compile({ chart: this._chart, vChart: this });
+        }
+        if (updateResult.reSize) {
+            const { width, height } = this.getCurrentSize();
+            this._currentSize = { width, height };
+            (_f = this._chart) === null || _f === void 0 ? void 0 : _f.onResize(width, height, false);
+            (_g = this._compiler) === null || _g === void 0 ? void 0 : _g.resize(width, height, false);
         }
     }
     _beforeRender(option = {}) {
@@ -55849,17 +55987,21 @@ class VChart {
         });
     }
     _updateAnimateState(initial) {
-        if (this._option.animation) {
+        var _a, _b;
+        if (this.isAnimationEnable()) {
             const updateGraphicAnimationState = (graphic) => {
                 var _a;
                 const diffState = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.diffState;
                 if (initial) {
-                    return diffState === 'exit' ? undefined : AnimationStateEnum.appear;
+                    return diffState === 'exit' ? AnimationStateEnum.none : AnimationStateEnum.appear;
                 }
                 return diffState;
             };
-            this._compiler.getRootMarks().forEach(mark => {
-                mark.updateAnimationState(updateGraphicAnimationState);
+            (_a = this._chart) === null || _a === void 0 ? void 0 : _a.getAllRegions().forEach(region => {
+                region.updateAnimateStateCallback(updateGraphicAnimationState);
+            });
+            (_b = this._chart) === null || _b === void 0 ? void 0 : _b.getAllComponents().forEach(component => {
+                component.updateAnimateStateCallback(updateGraphicAnimationState);
             });
         }
     }
@@ -55943,11 +56085,11 @@ class VChart {
         }
         if (this._chart) {
             this._chart.updateData(id, data, true, parserOptions);
-            this._compiler.render();
             if (userUpdateOptions === null || userUpdateOptions === void 0 ? void 0 : userUpdateOptions.reAnimate) {
                 this.stopAnimation();
                 this._updateAnimateState(true);
             }
+            this._compiler.render();
             return this;
         }
         this._spec.data = array(this._spec.data);
@@ -55958,11 +56100,11 @@ class VChart {
         if (this._chart) {
             this._chart.updateFullData(data);
             if (reRender) {
-                this._compiler.render();
                 if (userUpdateOptions === null || userUpdateOptions === void 0 ? void 0 : userUpdateOptions.reAnimate) {
                     this.stopAnimation();
                     this._updateAnimateState(true);
                 }
+                this._compiler.render();
             }
             return this;
         }
@@ -56482,10 +56624,20 @@ class VChart {
         return (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setDimensionIndex(value, opt);
     }
     stopAnimation() {
+        var _a;
+        (_a = this.getStage()) === null || _a === void 0 ? void 0 : _a.stopAnimation(true);
+    }
+    reRunNormalAnimation() {
+        var _a;
+        (_a = this.getStage()) === null || _a === void 0 ? void 0 : _a.reApplyAnimationState('normal', true);
     }
     pauseAnimation() {
+        var _a;
+        (_a = this.getStage()) === null || _a === void 0 ? void 0 : _a.pauseAnimation(true);
     }
     resumeAnimation() {
+        var _a;
+        (_a = this.getStage()) === null || _a === void 0 ? void 0 : _a.resumeAnimation(true);
     }
     convertDatumToPosition(datum, dataLinkInfo = {}, isRelativeToCanvas = false, checkInViewData) {
         var _a;
@@ -56632,6 +56784,12 @@ class VChart {
     _getMode() {
         return this._option.mode || RenderModeEnum['desktop-browser'];
     }
+    isAnimationEnable() {
+        if ('animation' in this._option) {
+            return !!this._option.animation;
+        }
+        return this._spec.animation !== false;
+    }
     _getChartOption(type) {
         return {
             type,
@@ -56645,7 +56803,6 @@ class VChart {
             modeParams: this._option.modeParams,
             getCompiler: () => this._compiler,
             viewBox: this._viewBox,
-            animation: this._option.animation,
             getTheme: this.getTheme,
             getSpecInfo: () => { var _a; return (_a = this._specInfo) !== null && _a !== void 0 ? _a : {}; },
             layout: this._option.layout,
@@ -56769,7 +56926,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.3-alpha.0";
+const version = "2.0.3-alpha.1";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -57533,7 +57690,7 @@ function isAnimationEnabledForSeries(series) {
     if (seriesSpec.animation === false) {
         return false;
     }
-    if (((_b = (_a = series.getChart()) === null || _a === void 0 ? void 0 : _a.getOption()) === null || _b === void 0 ? void 0 : _b.animation) === false) {
+    if (((_b = (_a = series.getOption()) === null || _a === void 0 ? void 0 : _a.globalInstance) === null || _b === void 0 ? void 0 : _b.isAnimationEnable()) === false) {
         return false;
     }
     let animationThreshold = (_c = seriesSpec.animationThreshold) !== null && _c !== void 0 ? _c : Number.MAX_SAFE_INTEGER;
@@ -57617,7 +57774,7 @@ class BaseSeriesSpecTransformer extends BaseModelSpecTransformer {
             if (labelSpec && labelSpec.visible) {
                 const { animation = true, animationUpdate: labelAnimationUpdate = true, animationEnter: labelAnimationEnter = true, animationExit: labelAnimationExit = true } = labelSpec;
                 const { animationUpdate = true, animationEnter = true, animationExit = true } = spec;
-                const animationEnabled = (_c = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.animation) !== null && _b !== void 0 ? _b : spec.animation) !== null && _c !== void 0 ? _c : labelSpec.animation;
+                const animationEnabled = (_c = (_b = (_a = this._option.globalInstance) === null || _a === void 0 ? void 0 : _a.isAnimationEnable()) !== null && _b !== void 0 ? _b : spec.animation) !== null && _c !== void 0 ? _c : labelSpec.animation;
                 const labelAnimationEnabled = !!animationEnabled && !!hasAnimation;
                 this.addLabelSpec(isFunction$1(markName) ? markName(labelSpec) : markName, Object.assign(Object.assign({}, labelSpec), { animation: labelAnimationEnabled ? animation : false, animationUpdate: labelAnimationEnabled && animationUpdate && labelAnimationUpdate ? animationUpdate : false, animationEnter: labelAnimationEnabled && animationEnter && labelAnimationEnter ? animationEnter : false, animationExit: labelAnimationEnabled && animationEnter && labelAnimationExit ? animationExit : false, getStyleHandler: (series) => { var _a; return (_a = series[styleHandlerName]) === null || _a === void 0 ? void 0 : _a.bind(series); } }), head);
             }
@@ -58582,14 +58739,11 @@ class BaseSeries extends BaseModel {
             }
             if (isNil$1(dataView)) {
                 m.setData(this._data);
-                m.setSkipBeforeLayouted(true);
             }
             else if (dataView !== false) {
                 m.setDataView(dataView);
             }
-            if (isBoolean$1(skipBeforeLayouted)) {
-                m.setSkipBeforeLayouted(skipBeforeLayouted);
-            }
+            m.setSkipBeforeLayouted(skipBeforeLayouted !== false);
             if (!isNil$1(groupKey)) {
                 m.setGroupKey(groupKey);
             }
@@ -59814,30 +59968,6 @@ class LineLikeSeriesMixin {
 
 const lineSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), lineLikeSeriesMark);
 
-var MarkTypeEnum;
-(function (MarkTypeEnum) {
-    MarkTypeEnum["group"] = "group";
-    MarkTypeEnum["symbol"] = "symbol";
-    MarkTypeEnum["rule"] = "rule";
-    MarkTypeEnum["line"] = "line";
-    MarkTypeEnum["text"] = "text";
-    MarkTypeEnum["rect"] = "rect";
-    MarkTypeEnum["image"] = "image";
-    MarkTypeEnum["path"] = "path";
-    MarkTypeEnum["area"] = "area";
-    MarkTypeEnum["arc"] = "arc";
-    MarkTypeEnum["polygon"] = "polygon";
-    MarkTypeEnum["boxPlot"] = "boxPlot";
-    MarkTypeEnum["linkPath"] = "linkPath";
-    MarkTypeEnum["cell"] = "cell";
-    MarkTypeEnum["ripple"] = "ripple";
-    MarkTypeEnum["liquid"] = "liquid";
-    MarkTypeEnum["component"] = "component";
-    MarkTypeEnum["dataLabel"] = "dataLabel";
-    MarkTypeEnum["label"] = "label";
-    MarkTypeEnum["pictogram"] = "pictogram";
-})(MarkTypeEnum || (MarkTypeEnum = {}));
-
 const isStopsEqual = (prev, next) => {
     var _a, _b;
     if (prev === next) {
@@ -61092,7 +61222,7 @@ class AxisComponent extends BaseComponent {
         return [(_a = this._axisMark) === null || _a === void 0 ? void 0 : _a.getProduct(), (_b = this._gridMark) === null || _b === void 0 ? void 0 : _b.getProduct()].filter(isValid$1);
     }
     created() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         super.created();
         this.setSeriesAndRegionsFromSpec();
         this.initEvent();
@@ -61129,15 +61259,15 @@ class AxisComponent extends BaseComponent {
                 this._marks.addMark(gridMark);
                 this._gridMark = gridMark;
             }
-            if (this._option.animation !== false &&
+            if (((_h = this._option.globalInstance) === null || _h === void 0 ? void 0 : _h.isAnimationEnable()) &&
                 get$1(this._option.getChart().getSpec(), 'animation') !== false &&
                 this._spec.animation === true) {
-                const axisAnimateConfig = animationConfig((_h = Factory.getAnimationInKey('axis')) === null || _h === void 0 ? void 0 : _h(), {
-                    appear: (_k = (_j = this._spec.animationAppear) !== null && _j !== void 0 ? _j : get$1(this._option.getChart().getSpec(), 'animationAppear.axis')) !== null && _k !== void 0 ? _k : get$1(this._option.getChart().getSpec(), 'animationAppear'),
-                    disappear: (_m = (_l = this._spec.animationDisappear) !== null && _l !== void 0 ? _l : get$1(this._option.getChart().getSpec(), 'animationDisappear.axis')) !== null && _m !== void 0 ? _m : get$1(this._option.getChart().getSpec(), 'animationDisappear'),
-                    enter: (_p = (_o = this._spec.animationEnter) !== null && _o !== void 0 ? _o : get$1(this._option.getChart().getSpec(), 'animationEnter.axis')) !== null && _p !== void 0 ? _p : get$1(this._option.getChart().getSpec(), 'animationEnter'),
-                    exit: (_r = (_q = this._spec.animationExit) !== null && _q !== void 0 ? _q : get$1(this._option.getChart().getSpec(), 'animationExit.axis')) !== null && _r !== void 0 ? _r : get$1(this._option.getChart().getSpec(), 'animationExit'),
-                    update: (_t = (_s = this._spec.animationUpdate) !== null && _s !== void 0 ? _s : get$1(this._option.getChart().getSpec(), 'animationUpdate.axis')) !== null && _t !== void 0 ? _t : get$1(this._option.getChart().getSpec(), 'animationUpdate')
+                const axisAnimateConfig = animationConfig((_j = Factory.getAnimationInKey('axis')) === null || _j === void 0 ? void 0 : _j(), {
+                    appear: (_l = (_k = this._spec.animationAppear) !== null && _k !== void 0 ? _k : get$1(this._option.getChart().getSpec(), 'animationAppear.axis')) !== null && _l !== void 0 ? _l : get$1(this._option.getChart().getSpec(), 'animationAppear'),
+                    disappear: (_o = (_m = this._spec.animationDisappear) !== null && _m !== void 0 ? _m : get$1(this._option.getChart().getSpec(), 'animationDisappear.axis')) !== null && _o !== void 0 ? _o : get$1(this._option.getChart().getSpec(), 'animationDisappear'),
+                    enter: (_q = (_p = this._spec.animationEnter) !== null && _p !== void 0 ? _p : get$1(this._option.getChart().getSpec(), 'animationEnter.axis')) !== null && _q !== void 0 ? _q : get$1(this._option.getChart().getSpec(), 'animationEnter'),
+                    exit: (_s = (_r = this._spec.animationExit) !== null && _r !== void 0 ? _r : get$1(this._option.getChart().getSpec(), 'animationExit.axis')) !== null && _s !== void 0 ? _s : get$1(this._option.getChart().getSpec(), 'animationExit'),
+                    update: (_u = (_t = this._spec.animationUpdate) !== null && _t !== void 0 ? _t : get$1(this._option.getChart().getSpec(), 'animationUpdate.axis')) !== null && _u !== void 0 ? _u : get$1(this._option.getChart().getSpec(), 'animationUpdate')
                 });
                 if (axisAnimateConfig.enter) {
                     axisAnimateConfig.update[0].customParameters = {
@@ -63004,6 +63134,24 @@ class BandAxisMixin {
             };
         }
     }
+    _updateData() {
+        var _a, _b, _c;
+        const tickTransformType = this.registerTicksTransform();
+        if (this._spec.showAllGroupLayers && this._scales.length > 1) {
+            const layers = (_a = this._spec.layers) !== null && _a !== void 0 ? _a : [];
+            Object.keys(this._tickDataMap).forEach(layer => {
+                const layerConfig = layers[this._scales.length - 1 - +layer] || {};
+                const tickData = this._tickDataMap[layer];
+                const tickTransform = tickData === null || tickData === void 0 ? void 0 : tickData.getDataView().transformsArr.find((t) => t.type === tickTransformType);
+                tickTransform &&
+                    (tickTransform.options = Object.assign(Object.assign({}, this._tickTransformOption()), layerConfig));
+            });
+        }
+        else {
+            const tickTransform = (_c = (_b = this._tickData) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.getDataView().transformsArr.find(t => t.type === tickTransformType);
+            tickTransform && (tickTransform.options = this._tickTransformOption());
+        }
+    }
     dataToPosition(values, cfg = {}) {
         var _a, _b;
         if (values.length === 0 || this._scales.length === 0) {
@@ -63096,7 +63244,7 @@ class BandAxisMixin {
     getLabelItems(length) {
         const labelItems = [];
         let preData = [];
-        this._scales.forEach((scale, index) => {
+        (this._spec.showAllGroupLayers ? this._scales : [this._scales[0]]).forEach((scale, index) => {
             var _a;
             const tickData = this._tickDataMap[index];
             const isTickDataHaveData = (_a = tickData === null || tickData === void 0 ? void 0 : tickData.getLatestData()) === null || _a === void 0 ? void 0 : _a.length;
@@ -63278,6 +63426,20 @@ class CartesianBandAxis extends CartesianAxis {
             minBandSize
         };
     }
+    _compareSpec(spec, prevSpec) {
+        const result = super._compareSpec(spec, prevSpec);
+        if (result.reMake) {
+            return result;
+        }
+        if ((prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.showAllGroupLayers) !== (spec === null || spec === void 0 ? void 0 : spec.showAllGroupLayers) || !isEqual(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.layers, spec === null || spec === void 0 ? void 0 : spec.layers)) {
+            result.reMake = true;
+        }
+        return result;
+    }
+    reInit(spec) {
+        super.reInit();
+        this === null || this === void 0 ? void 0 : this._updateData();
+    }
 }
 CartesianBandAxis.type = ComponentTypeEnum.cartesianBandAxis;
 CartesianBandAxis.specKey = 'axes';
@@ -64920,6 +65082,10 @@ class BaseChart extends CompilableBase {
         const elements = [...this._components, ...this._regions, ...this._series];
         elements.forEach(element => element.onEvaluateEnd(option));
     }
+    onBeforeRender() {
+        const elements = [...this._components, ...this._regions, ...this._series];
+        elements.forEach(element => element.onBeforeRender());
+    }
     getLayoutElements() {
         return this.getAllModels()
             .map(i => i.layout)
@@ -65385,17 +65551,11 @@ class BaseChart extends CompilableBase {
     }
     _enableMarkAnimation(states) {
         const marks = this.getAllMarks();
-        marks.forEach(mark => {
-            const product = mark.getProduct();
-            if (product && product.animate) ;
-        });
+        marks.forEach(mark => mark.enableAnimationByState(states));
     }
     _disableMarkAnimation(states) {
         const marks = this.getAllMarks();
-        marks.forEach(mark => {
-            const product = mark.getProduct();
-            if (product && product.animate) ;
-        });
+        marks.forEach(mark => mark.disableAnimationByState(states));
     }
     filterGraphicsByDatum(datum, opt = {}) {
         var _a;
@@ -65650,15 +65810,15 @@ class BaseChartSpecTransformer {
         return true;
     }
     _getDefaultSeriesSpec(chartSpec, pickKeys, pickKeys2) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const series = {
             dataKey: chartSpec.dataKey,
             hover: chartSpec.hover,
             select: chartSpec.select,
             label: chartSpec.label,
             seriesStyle: chartSpec.seriesStyle,
-            animation: (_a = chartSpec.animation) !== null && _a !== void 0 ? _a : this._option.animation,
-            animationThreshold: (_b = chartSpec.animationThreshold) !== null && _b !== void 0 ? _b : (_d = (_c = this._option).getTheme) === null || _d === void 0 ? void 0 : _d.call(_c, 'animationThreshold'),
+            animation: (_a = chartSpec.animation) !== null && _a !== void 0 ? _a : (_b = this._option.globalInstance) === null || _b === void 0 ? void 0 : _b.isAnimationEnable(),
+            animationThreshold: (_c = chartSpec.animationThreshold) !== null && _c !== void 0 ? _c : (_e = (_d = this._option).getTheme) === null || _e === void 0 ? void 0 : _e.call(_d, 'animationThreshold'),
             animationAppear: chartSpec.animationAppear,
             animationDisappear: chartSpec.animationDisappear,
             animationEnter: chartSpec.animationEnter,
@@ -66278,7 +66438,7 @@ const layoutByValue$1 = (stateByField, series, layoutStartPoint, enableRemain =
         layoutStartPoint = { x: 0, y: 0 };
     }
     Object.keys(stateByField).forEach(field => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const { currentValue, cacheInfo, labelsComp, attributes, coordKey } = stateByField[field];
         let axis = null;
         let coord = 0;
@@ -66290,8 +66450,8 @@ const layoutByValue$1 = (stateByField, series, layoutStartPoint, enableRemain =
                     item.axis.getLayoutStartPoint()[coordKey] -
                     layoutStartPoint[coordKey];
             axis = item.axis;
-            axisLabel = (_e = (_d = (_c = (_b = (_a = axis
-                .getVRenderComponents()[0]) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.getChildByName('axis-label-container')) === null || _d === void 0 ? void 0 : _d.getChildByName('axis-label-container-layer-0')) === null || _e === void 0 ? void 0 : _e.children[0];
+            axisLabel = (_f = (_e = (_d = (_c = (_b = (_a = axis
+                .getVRenderComponents()[0]) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.children[0]) === null || _d === void 0 ? void 0 : _d.getChildByName('axis-label-container')) === null || _e === void 0 ? void 0 : _e.getChildByName('axis-label-container-layer-0')) === null || _f === void 0 ? void 0 : _f.children[0];
         }
         const isVisible = !!currentValue.size && Number.isFinite(coord) && !Number.isNaN(coord);
         const useCache = enableRemain && !isVisible && isValid$1(cacheInfo);
@@ -69669,8 +69829,7 @@ class MapSeries extends GeoSeries {
     initMark() {
         this._pathMark = this._createMark(MapSeries.mark.area, {
             groupKey: this.getDimensionField()[0],
-            isSeriesMark: true,
-            skipBeforeLayouted: true
+            isSeriesMark: true
         }, {
             morph: shouldMarkDoMorph(this._spec, MapSeries.mark.area.name),
             morphElementKey: this.getDimensionField()[0]
@@ -73156,7 +73315,6 @@ class BasePieSeries extends PolarSeries {
         this._pieMark = this._createMark(Object.assign(Object.assign({}, BasePieSeries.mark.pie), { name: this._pieMarkName, type: this._pieMarkType }), {
             key: DEFAULT_DATA_KEY,
             groupKey: this._seriesField,
-            skipBeforeLayouted: true,
             isSeriesMark: true
         }, {
             morph: shouldMarkDoMorph(this._spec, this._pieMarkName),
@@ -74621,17 +74779,16 @@ class DotSeriesTooltipHelper extends BaseSeriesTooltipHelper {
         const userUpdateContent = (_c = (_b = (_a = this.spec) === null || _a === void 0 ? void 0 : _a[activeType]) === null || _b === void 0 ? void 0 : _b.updateContent) !== null && _c !== void 0 ? _c : (_d = chartTooltipSpec === null || chartTooltipSpec === void 0 ? void 0 : chartTooltipSpec[activeType]) === null || _d === void 0 ? void 0 : _d.updateContent;
         if (res && !userUpdateContent) {
             res.updateContent = (prev, datum, params) => {
-                var _a, _b;
                 const childrenContent = [];
                 const childrenPrev = prev.filter((p) => p.key === 'children');
                 childrenPrev.length > 0 &&
-                    ((_b = (_a = childrenPrev === null || childrenPrev === void 0 ? void 0 : childrenPrev[0]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.forEach((element) => {
+                    childrenPrev[0].value.forEach((element) => {
                         let flag = true;
                         for (const key in element) {
                             childrenContent.push(Object.assign(Object.assign({}, childrenPrev[0]), { shapeType: 'circle', hasShape: flag, key: key, value: element[key] + '' }));
                             flag = false;
                         }
-                    }));
+                    });
                 return prev.concat(childrenContent);
             };
         }
@@ -74654,21 +74811,13 @@ const objFlat = (data, op) => {
             }
         }
         const dataOp = datum[op];
-        if (dataOp && dataOp.length > 0) {
-            dataOp === null || dataOp === void 0 ? void 0 : dataOp.forEach((d, i) => {
-                result.push(Object.assign({}, dataKeyObj, d, {
-                    [DEFAULT_DATA_INDEX]: index,
-                    [DEFAULT_DATA_KEY]: `${dataKey}_${i}`
-                }));
-                index++;
-            });
-        }
-        else {
-            result.push(Object.assign({}, dataKeyObj, {
+        dataOp === null || dataOp === void 0 ? void 0 : dataOp.forEach((d, i) => {
+            result.push(Object.assign({}, dataKeyObj, d, {
                 [DEFAULT_DATA_INDEX]: index,
-                [DEFAULT_DATA_KEY]: dataKey
+                [DEFAULT_DATA_KEY]: `${dataKey}_${i}`
             }));
-        }
+            index++;
+        });
     });
     return result;
 };
@@ -74761,7 +74910,7 @@ class DotSeries extends CartesianSeries {
         }
     }
     initData() {
-        var _a, _b;
+        var _a;
         super.initData();
         this._xDimensionStatisticsDomain = this.getRawData().latestData.map((d) => d[this._fieldY[0]]);
         registerDataSetInstanceTransform(this._option.dataSet, 'objFlat', objFlat);
@@ -74772,31 +74921,9 @@ class DotSeries extends CartesianSeries {
             options: 'dots',
             level: TransformLevel.dotObjFlat
         }, false);
-        (_b = this.getRawData()) === null || _b === void 0 ? void 0 : _b.transform({
-            type: 'objFlat',
-            options: 'dots',
-            level: TransformLevel.dotObjFlat
-        }, false);
-    }
-    _statisticViewData() {
-        var _a;
-        super._statisticViewData();
-        (_a = this._viewDataStatistics) === null || _a === void 0 ? void 0 : _a.transform({
-            type: 'objFlat',
-            options: 'dots',
-            level: TransformLevel.dotObjFlat
-        }, false);
     }
     getStatisticFields() {
-        const result = [{ key: this._fieldY[0], operations: ['values'], customize: this._xDimensionStatisticsDomain }];
-        const { linearMode = true } = this._spec;
-        if (linearMode) {
-            result.push({ key: this._fieldX[0], operations: ['min', 'max'] });
-        }
-        else {
-            result.push({ key: this._fieldX[0], operations: ['values'] });
-        }
-        return result;
+        return [{ key: this._fieldY[0], operations: ['values'], customize: this._xDimensionStatisticsDomain }];
     }
     setAttrFromSpec() {
         var _a;
@@ -74841,21 +74968,20 @@ class DotSeries extends CartesianSeries {
         });
     }
     initMarkStyle() {
-        var _a, _b;
         const clipMark = this._clipMark;
         if (clipMark) {
             this.setMarkStyle(clipMark, {
-                x: -((_a = this._spec.leftAppendPadding) !== null && _a !== void 0 ? _a : 0),
+                x: -this._spec.leftAppendPadding,
                 y: 0,
                 width: 10000,
-                height: () => { var _a; return (_a = this._spec.clipHeight) !== null && _a !== void 0 ? _a : this._region.getLayoutRect().height; }
+                height: this._spec.clipHeight
             }, 'normal', AttributeLevel.Series);
             clipMark.setMarkConfig({ interactive: false, clip: true });
         }
         const containerMark = this._containerMark;
         if (containerMark) {
             this.setMarkStyle(containerMark, {
-                x: (_b = this._spec.leftAppendPadding) !== null && _b !== void 0 ? _b : 0
+                x: this._spec.leftAppendPadding
             }, 'normal', AttributeLevel.Series);
             containerMark.setMarkConfig({ interactive: false });
         }
@@ -75080,13 +75206,7 @@ class LinkSeriesTooltipHelper extends BaseSeriesTooltipHelper {
     }
 }
 
-var LinkType;
-(function (LinkType) {
-    LinkType["line"] = "line";
-    LinkType["curve"] = "curve";
-})(LinkType || (LinkType = {}));
-
-const linkSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), { ["group"]: { name: "group", type: "group" }, ["link"]: { name: "link", type: "rule" }, ["curveLink"]: { name: "curveLink", type: "path" }, ["arrow"]: { name: "arrow", type: "symbol" }, ["imageLabel"]: { name: "imageLabel", type: "image" } });
+const linkSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), { ["group"]: { name: "group", type: "group" }, ["link"]: { name: "link", type: "rule" }, ["arrow"]: { name: "arrow", type: "symbol" } });
 
 const linkDotInfo = (data, op) => {
     const { infoKey, fields, linkData, dotData } = op;
@@ -75128,7 +75248,6 @@ class LinkSeries extends CartesianSeries {
     constructor() {
         super(...arguments);
         this.type = SeriesTypeEnum.link;
-        this._curveLinkCountMap = {};
     }
     getFromField() {
         return this._fromField;
@@ -75199,12 +75318,11 @@ class LinkSeries extends CartesianSeries {
         this.setDotSeriesSpec(this._spec.dotSeriesSpec);
     }
     initMark() {
-        const { linkType = LinkType.line, imageLabelField } = this._spec;
         this._clipMark = this._createMark(LinkSeries.mark.group);
         this._containerMark = this._createMark(LinkSeries.mark.group, {
             parent: this._clipMark
         });
-        this._linkMark = this._createMark(linkType === LinkType.curve ? LinkSeries.mark.curveLink : LinkSeries.mark.link, {
+        this._linkMark = this._createMark(LinkSeries.mark.link, {
             skipBeforeLayouted: false,
             parent: this._containerMark
         });
@@ -75213,23 +75331,16 @@ class LinkSeries extends CartesianSeries {
             isSeriesMark: true,
             parent: this._containerMark
         });
-        if (imageLabelField) {
-            this._imageLabelMark = this._createMark(LinkSeries.mark.imageLabel, {
-                skipBeforeLayouted: false,
-                isSeriesMark: true,
-                parent: this._containerMark
-            });
-        }
     }
     initMarkStyle() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d;
         const clipMark = this._clipMark;
         if (clipMark) {
             this.setMarkStyle(clipMark, {
-                x: -((_a = this._spec.leftAppendPadding) !== null && _a !== void 0 ? _a : 0),
+                x: -this._spec.leftAppendPadding,
                 y: 0,
                 width: 10000,
-                height: () => { var _a; return (_a = this._spec.clipHeight) !== null && _a !== void 0 ? _a : this._region.getLayoutRect().height; }
+                height: this._spec.clipHeight
             }, 'normal', AttributeLevel.Series);
             clipMark.setMarkConfig({ interactive: false, clip: true });
         }
@@ -75242,43 +75353,19 @@ class LinkSeries extends CartesianSeries {
             containerMark.setMarkConfig({ interactive: false });
         }
         const linkMark = this._linkMark;
-        const { linkType = LinkType.line } = this._spec;
         if (linkMark) {
-            if (linkType === LinkType.curve) {
-                this.setMarkStyle(linkMark, {
-                    stroke: (_d = (_c = (_b = this._spec.link) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.stroke) !== null && _d !== void 0 ? _d : this.getColorAttribute(),
-                    strokeOpacity: this.dataToOpacity.bind(this),
-                    path: (datum) => {
-                        const fromX = this.dataToPositionXFrom(datum);
-                        const fromY = this.dataToPositionYFrom(datum);
-                        const toX = this.dataToPositionXTo(datum);
-                        const toY = this.dataToPositionYTo(datum);
-                        const curveLinkCount = this._curveLinkCountMap[`${fromX}-${fromY}-${toX}-${toY}`] || 1;
-                        this._curveLinkCountMap[`${fromX}-${fromY}-${toX}-${toY}`] = curveLinkCount + 1;
-                        const curveRatio = 0.5 + curveLinkCount * 0.1;
-                        const controlX1 = fromX + (toX - fromX) * 0.7;
-                        const controlY1 = fromY;
-                        const controlX2 = toX - (toX - fromX) * curveRatio;
-                        const controlY2 = toY;
-                        return `M ${fromX} ${fromY} C ${controlX1} ${controlY1}, ${controlX2} ${controlY2}, ${toX} ${toY}`;
-                    },
-                    lineWidth: (_f = (_e = this._spec.link.style) === null || _e === void 0 ? void 0 : _e.lineWidth) !== null && _f !== void 0 ? _f : 1
-                }, 'normal', AttributeLevel.Series);
-            }
-            else {
-                this.setMarkStyle(linkMark, {
-                    stroke: this.getColorAttribute(),
-                    strokeOpacity: this.dataToOpacity.bind(this),
-                    x: this.dataToPositionXFrom.bind(this),
-                    y: this.dataToPositionYFrom.bind(this),
-                    x1: this.dataToPositionXTo.bind(this),
-                    y1: this.dataToPositionYTo.bind(this)
-                }, 'normal', AttributeLevel.Series);
-            }
+            this.setMarkStyle(linkMark, {
+                stroke: this.getColorAttribute(),
+                strokeOpacity: this.dataToOpacity.bind(this),
+                x: this.dataToPositionXFrom.bind(this),
+                y: this.dataToPositionYFrom.bind(this),
+                x1: this.dataToPositionXTo.bind(this),
+                y1: this.dataToPositionYTo.bind(this)
+            }, 'normal', AttributeLevel.Series);
         }
         const arrowMark = this._arrowMark;
         if (arrowMark) {
-            const arrowSize = (_k = (_j = (_h = (_g = this._theme) === null || _g === void 0 ? void 0 : _g.arrow) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.size) !== null && _k !== void 0 ? _k : 10;
+            const arrowSize = (_d = (_c = (_b = (_a = this._theme) === null || _a === void 0 ? void 0 : _a.arrow) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : 10;
             this.setMarkStyle(arrowMark, {
                 x: this.dataToPositionXTo.bind(this),
                 y: (datum) => this.dataToPositionArrowYTo(datum, arrowSize),
@@ -75290,44 +75377,18 @@ class LinkSeries extends CartesianSeries {
                 }
             }, 'normal', AttributeLevel.Series);
         }
-        const imageLabelMark = this._imageLabelMark;
-        if (imageLabelMark) {
-            const { style = {} } = this._spec.imageLabel;
-            const { width = 40, height = 40 } = style;
-            this.setMarkStyle(imageLabelMark, {
-                x: datum => {
-                    return (this.dataToPositionXFrom(datum) + this.dataToPositionXTo(datum)) / 2 - width / 2;
-                },
-                y: datum => {
-                    return (this.dataToPositionYFrom(datum) + this.dataToPositionYTo(datum)) / 2 - height / 2;
-                },
-                width,
-                height,
-                image: datum => {
-                    return datum[this._spec.imageLabelField];
-                }
-            }, 'normal', AttributeLevel.Series);
-        }
     }
     afterInitMark() {
         super.afterInitMark();
     }
     dataToPositionXFrom(datum) {
-        var _a, _b, _c, _d;
         if (!this._xAxisHelper) {
             return Number.NaN;
         }
         const { dataToPosition } = this._xAxisHelper;
-        const allowExtend = this._spec.allowExtend;
-        const bandSize = (_c = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getBandwidth) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) !== null && _c !== void 0 ? _c : 0;
-        const { style = {} } = (_d = this._dotSeriesSpec.symbol) !== null && _d !== void 0 ? _d : {};
-        const { size: dotSize = 10 } = style;
-        return (dataToPosition(this.getDatumPositionValues(datum, this._fromField + '_xField'), {
+        return dataToPosition(this.getDatumPositionValues(datum, this._fromField + '_xField'), {
             bandPosition: this._bandPosition
-        }) +
-            (allowExtend && (!datum.isExtend || datum.isExtend === 'left')
-                ? -(array(bandSize)[0] + dotSize) / 2
-                : 0));
+        });
     }
     dataToPositionYFrom(datum) {
         if (!this._yAxisHelper) {
@@ -75337,21 +75398,13 @@ class LinkSeries extends CartesianSeries {
         return dataToPosition(this.getDatumPositionValues(datum, this._fromField + '_yField'));
     }
     dataToPositionXTo(datum) {
-        var _a, _b, _c, _d;
         if (!this._xAxisHelper) {
             return Number.NaN;
         }
         const { dataToPosition } = this._xAxisHelper;
-        const allowExtend = this._spec.allowExtend;
-        const bandSize = (_c = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getBandwidth) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) !== null && _c !== void 0 ? _c : 0;
-        const { style = {} } = (_d = this._dotSeriesSpec.symbol) !== null && _d !== void 0 ? _d : {};
-        const { size: dotSize = 10 } = style;
-        return (dataToPosition(this.getDatumPositionValues(datum, this._toField + '_xField'), {
+        return dataToPosition(this.getDatumPositionValues(datum, this._toField + '_xField'), {
             bandPosition: this._bandPosition
-        }) +
-            (allowExtend && (!datum.isExtend || datum.isExtend === 'right')
-                ? (array(bandSize)[0] + dotSize) / 2
-                : 0));
+        });
     }
     dataToPositionYTo(datum) {
         if (!this._yAxisHelper) {
@@ -75373,10 +75426,9 @@ class LinkSeries extends CartesianSeries {
         }) + offset);
     }
     dataToOpacity(datum) {
-        if (!this._spec.allowExtend &&
-            (this.isPositionXOuterRange(datum, this._fromField + '_xField') ||
-                this.isPositionXOuterRange(datum, this._toField + '_xField') ||
-                datum[this._fromField] === datum[this._toField])) {
+        if (this.isPositionXOuterRange(datum, this._fromField + '_xField') ||
+            this.isPositionXOuterRange(datum, this._toField + '_xField') ||
+            datum[this._fromField] === datum[this._toField]) {
             return 0;
         }
         return 1;
@@ -76890,6 +76942,72 @@ const calculateNodeValue = subTree => {
     isNil$1(node.value) && ((null === (_a = node.children) || void 0 === _a ? void 0 : _a.length) ? node.value = calculateNodeValue(node.children) : node.value = 0), sum += Math.abs(node.value);
   }), sum;
 };
+function makeHierarchicNodes(originalNodes, nodeKeyFunc, nodes = [], nodeMap = {}, originalLinks) {
+  calculateNodeValue(originalNodes);
+  const doSubTree = (subTree, depth, parents) => {
+    subTree.forEach((node, index) => {
+      const nodeKey = nodeKeyFunc ? nodeKeyFunc(node) : parents ? `${parents[parents.length - 1].key}-${index}` : `${depth}-${index}`,
+        nodeValue = isNil$1(node.value) ? 0 : toValidNumber$1(node.value);
+      if (nodeMap[nodeKey]) nodeMap[nodeKey].value = void 0;else {
+        const nodeElement = {
+          depth: depth,
+          datum: node,
+          index: index,
+          key: nodeKey,
+          value: nodeValue,
+          sourceLinks: [],
+          targetLinks: []
+        };
+        nodeMap[nodeKey] = nodeElement, nodes.push(nodeElement);
+      }
+      parents && originalLinks && originalLinks.push({
+        source: parents[parents.length - 1].key,
+        target: nodeKey,
+        value: nodeValue,
+        parents: parents
+      }), node.children && node.children.length && doSubTree(node.children, depth + 1, parents ? parents.concat([nodeMap[nodeKey]]) : [nodeMap[nodeKey]]);
+    });
+  };
+  return doSubTree(originalNodes, 0, null), nodes;
+}
+function computeHierarchicNodeLinks(originalNodes, nodeKeyFunc) {
+  const nodes = [],
+    links = [],
+    nodeMap = {},
+    linkMap = {},
+    originalLinks = [];
+  return makeHierarchicNodes(originalNodes, nodeKeyFunc, nodes, nodeMap, originalLinks), originalLinks.forEach((link, index) => {
+    const key = `${link.source}-${link.target}`,
+      linkDatum = pickWithout(link, ["parents"]);
+    if (linkDatum.parents = link.parents.map(node => pickWithout(node, ["sourceLinks", "targetLinks"])), linkMap[key]) return linkMap[key].value += toValidNumber$1(link.value), void linkMap[key].datum.push(linkDatum);
+    const linkElement = {
+      index: index,
+      key: `${link.source}-${link.target}`,
+      source: link.source,
+      target: link.target,
+      datum: [linkDatum],
+      value: link.value,
+      parents: link.parents.map(parent => parent.key)
+    };
+    links.push(linkElement), nodeMap[link.source].sourceLinks.push(linkElement), nodeMap[link.target].targetLinks.push(linkElement), linkMap[key] = linkElement;
+  }), {
+    nodes: nodes,
+    links: links,
+    nodeMap: nodeMap
+  };
+}
+function computeNodeValues(nodes) {
+  for (let i = 0, len = nodes.length; i < len; i++) {
+    const node = nodes[i];
+    node.value = Math.max(isNil$1(node.value) ? 0 : toValidNumber$1(node.value), node.sourceLinks.reduce((sum, link) => {
+      var _a;
+      return sum + (null !== (_a = toValidNumber$1(link.value)) && void 0 !== _a ? _a : 0);
+    }, 0), node.targetLinks.reduce((sum, link) => {
+      var _a;
+      return sum + (null !== (_a = toValidNumber$1(link.value)) && void 0 !== _a ? _a : 0);
+    }, 0));
+  }
+}
 
 function left(node) {
   return node.depth;
@@ -77023,55 +77141,7 @@ class SankeyLayout {
     };
   }
   computeHierarchicNodeLinks(originalNodes) {
-    const nodes = [],
-      links = [],
-      nodeMap = {},
-      linkMap = {},
-      originalLinks = [];
-    calculateNodeValue(originalNodes);
-    const doSubTree = (subTree, depth, parents) => {
-      subTree.forEach((node, index) => {
-        const nodeKey = this._getNodeKey ? this._getNodeKey(node) : parents ? `${parents[parents.length - 1].key}-${index}` : `${depth}-${index}`,
-          nodeValue = isNil$1(node.value) ? 0 : toValidNumber$1(node.value);
-        if (nodeMap[nodeKey]) nodeMap[nodeKey].value = void 0;else {
-          const nodeElement = {
-            depth: depth,
-            datum: node,
-            index: index,
-            key: nodeKey,
-            value: nodeValue,
-            sourceLinks: [],
-            targetLinks: []
-          };
-          nodeMap[nodeKey] = nodeElement, nodes.push(nodeElement);
-        }
-        parents && originalLinks.push({
-          source: parents[parents.length - 1].key,
-          target: nodeKey,
-          value: nodeValue,
-          parents: parents
-        }), node.children && node.children.length && doSubTree(node.children, depth + 1, parents ? parents.concat([nodeMap[nodeKey]]) : [nodeMap[nodeKey]]);
-      });
-    };
-    return doSubTree(originalNodes, 0, null), originalLinks.forEach((link, index) => {
-      const key = `${link.source}-${link.target}`,
-        linkDatum = pickWithout(link, ["parents"]);
-      if (linkDatum.parents = link.parents.map(node => pickWithout(node, ["sourceLinks", "targetLinks"])), linkMap[key]) return linkMap[key].value += toValidNumber$1(link.value), void linkMap[key].datum.push(linkDatum);
-      const linkElement = {
-        index: index,
-        key: `${link.source}-${link.target}`,
-        source: link.source,
-        target: link.target,
-        datum: [linkDatum],
-        value: link.value,
-        parents: link.parents.map(parent => parent.key)
-      };
-      links.push(linkElement), nodeMap[link.source].sourceLinks.push(linkElement), nodeMap[link.target].targetLinks.push(linkElement), linkMap[key] = linkElement;
-    }), {
-      nodes: nodes,
-      links: links,
-      nodeMap: nodeMap
-    };
+    return computeHierarchicNodeLinks(originalNodes, this._getNodeKey);
   }
   computeSourceTargetNodeLinks(data) {
     const nodes = [],
@@ -77141,16 +77211,7 @@ class SankeyLayout {
     };
   }
   computeNodeValues(nodes) {
-    for (let i = 0, len = nodes.length; i < len; i++) {
-      const node = nodes[i];
-      node.value = Math.max(isNil$1(node.value) ? 0 : toValidNumber$1(node.value), node.sourceLinks.reduce((sum, link) => {
-        var _a;
-        return sum + (null !== (_a = toValidNumber$1(link.value)) && void 0 !== _a ? _a : 0);
-      }, 0), node.targetLinks.reduce((sum, link) => {
-        var _a;
-        return sum + (null !== (_a = toValidNumber$1(link.value)) && void 0 !== _a ? _a : 0);
-      }, 0));
-    }
+    return computeNodeValues(nodes);
   }
   computeNodeDepths(nodes) {
     var _a;
@@ -78215,7 +78276,7 @@ function normalizeSolution(solution, orientation, orientationOrder) {
   return ret;
 }
 
-function scaleSolution(solution, width, height, x0, y0) {
+function scaleSolution(solution, width, height, x0, y0, hasEmptySet = !1) {
   width = Math.max(width, 1), height = Math.max(height, 1);
   const circles = [],
     setIds = [];
@@ -78225,9 +78286,20 @@ function scaleSolution(solution, width, height, x0, y0) {
     yRange = bounds.yRange;
   if (xRange.max === xRange.min || yRange.max === yRange.min) return console.log("not scaling solution: zero size detected"), solution;
   const xScaling = width / (xRange.max - xRange.min),
-    yScaling = height / (yRange.max - yRange.min),
-    scaling = Math.min(yScaling, xScaling),
-    xOffset = (width - (xRange.max - xRange.min) * scaling) / 2,
+    yScaling = height / (yRange.max - yRange.min);
+  let scaling;
+  if (hasEmptySet) {
+    const containerRadius = Math.min(width, height) / 2,
+      centerX = (xRange.min + xRange.max) / 2,
+      centerY = (yRange.min + yRange.max) / 2;
+    let diagramRadius = 0;
+    for (const circle of circles) {
+      const maxDistanceForThisCircle = Math.sqrt(Math.pow(circle.x - centerX, 2) + Math.pow(circle.y - centerY, 2)) + circle.radius;
+      diagramRadius = Math.max(diagramRadius, maxDistanceForThisCircle);
+    }
+    scaling = containerRadius / diagramRadius;
+  } else scaling = Math.min(yScaling, xScaling);
+  const xOffset = (width - (xRange.max - xRange.min) * scaling) / 2,
     yOffset = (height - (yRange.max - yRange.min) * scaling) / 2,
     scaled = {};
   for (let i = 0; i < circles.length; ++i) {
@@ -78442,21 +78514,39 @@ const transform$2 = (options, upstreamData) => {
     setField = "sets",
     valueField = "size",
     orientation = Math.PI / 2,
-    orientationOrder = null
+    orientationOrder = null,
+    emptySetKey: emptySetKey
   } = options;
   let circles = {},
     textCenters = {};
-  if (upstreamData.length > 0) {
-    const vennData = upstreamData.map(area => ({
+  const hasEmptySet = upstreamData.some(area => {
+      const sets = array(area[setField]);
+      return !sets || 0 === sets.length;
+    }),
+    nonEmptyData = hasEmptySet ? upstreamData.filter(area => !isEmpty(array(area[setField]))) : upstreamData;
+  if (nonEmptyData.length > 0) {
+    const vennData = nonEmptyData.map(area => ({
       sets: array(area[setField]),
       size: area[valueField]
     }));
     let solution = venn$1(vennData, options);
-    solution = normalizeSolution(solution, orientation, orientationOrder), circles = scaleSolution(solution, x1 - x0, y1 - y0, x0, y0), textCenters = computeTextCenters(circles, vennData);
+    solution = normalizeSolution(solution, orientation, orientationOrder), circles = scaleSolution(solution, x1 - x0, y1 - y0, x0, y0, hasEmptySet), textCenters = computeTextCenters(circles, vennData);
   }
   return upstreamData.map(area => {
-    const sets = array(area[setField]),
-      key = sets.toString(),
+    const sets = array(area[setField]);
+    if (!sets || 0 === sets.length) return Object.assign(Object.assign({}, area), {
+      datum: area,
+      sets: sets,
+      key: emptySetKey || "others",
+      size: area[valueField],
+      labelX: void 0,
+      labelY: void 0,
+      type: "circle",
+      x: x0 + (x1 - x0) / 2,
+      y: y0 + (y1 - y0) / 2,
+      radius: Math.min(x1 - x0, y1 - y0) / 2
+    });
+    const key = sets.toString(),
       textCenter = textCenters[key],
       basicDatum = Object.assign(Object.assign({}, area), {
         datum: area,
@@ -80921,7 +81011,6 @@ class FunnelSeries extends BaseSeries {
         if (this._spec.isTransform) {
             this._funnelTransformMark = this._createMark(Object.assign(Object.assign({}, FunnelSeries.mark.transform), { name: this._transformMarkName, type: this._transformMarkType }), {
                 themeSpec: (_b = this._theme) === null || _b === void 0 ? void 0 : _b.transform,
-                skipBeforeLayouted: true,
                 noSeparateStyle: true
             });
             if (this._funnelTransformMark) {
@@ -80934,7 +81023,6 @@ class FunnelSeries extends BaseSeries {
             this._funnelOuterLabelMark.label = this._createMark(FunnelSeries.mark.outerLabel, {
                 themeSpec: (_h = this._theme) === null || _h === void 0 ? void 0 : _h.outerLabel,
                 markSpec: this._spec.outerLabel,
-                skipBeforeLayouted: true,
                 noSeparateStyle: true,
                 parent: false
             });
@@ -82842,380 +82930,6 @@ class SankeySeries extends CartesianSeries {
                 }
             }
         };
-        this._handleClearEmpty = () => {
-            var _a, _b;
-            if (!this._needClear) {
-                return;
-            }
-            const allNodeElements = (_a = this._nodeMark) === null || _a === void 0 ? void 0 : _a.getGraphics();
-            if (!allNodeElements || !allNodeElements.length) {
-                return;
-            }
-            const allLinkElements = (_b = this._linkMark) === null || _b === void 0 ? void 0 : _b.getGraphics();
-            if (!allLinkElements || !allLinkElements.length) {
-                return;
-            }
-            allNodeElements.forEach(el => {
-                el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-            });
-            allLinkElements.forEach(el => {
-                el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-            });
-            this._needClear = false;
-        };
-        this._handleNodeAdjacencyClick = (graphic) => {
-            const nodeDatum = getDatumOfGraphic(graphic);
-            const highlightNodes = [nodeDatum.key];
-            if (this._linkMark) {
-                const allLinkElements = this._linkMark.getGraphics();
-                if (!allLinkElements || !allLinkElements.length) {
-                    return;
-                }
-                allLinkElements.forEach((linkEl, i) => {
-                    const linkDatum = getDatumOfGraphic(linkEl);
-                    if (linkDatum.source === nodeDatum.key) {
-                        if (!highlightNodes.includes(linkDatum.target)) {
-                            highlightNodes.push(linkDatum.target);
-                        }
-                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
-                    }
-                    else if (linkDatum.target === nodeDatum.key) {
-                        if (!highlightNodes.includes(linkDatum.source)) {
-                            highlightNodes.push(linkDatum.source);
-                        }
-                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
-                    }
-                    else {
-                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                        linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
-                    }
-                });
-            }
-            if (this._nodeMark) {
-                this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
-            }
-            this._needClear = true;
-        };
-        this._handleLinkAdjacencyClick = (graphic) => {
-            const curLinkDatum = getDatumOfGraphic(graphic);
-            const highlightNodes = [curLinkDatum.source, curLinkDatum.target];
-            if (this._linkMark) {
-                const allLinkElements = this._linkMark.getGraphics();
-                if (!allLinkElements || !allLinkElements.length) {
-                    return;
-                }
-                allLinkElements.forEach(linkEl => {
-                    if (linkEl === graphic) {
-                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 });
-                    }
-                    else {
-                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                        linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
-                    }
-                });
-            }
-            if (this._nodeMark) {
-                this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
-            }
-            this._needClear = true;
-        };
-        this._handleNodeRelatedClick = (graphic) => {
-            var _a;
-            const nodeDatum = getDatumOfGraphic(graphic);
-            const allNodeElements = this._nodeMark.getGraphics();
-            if (!allNodeElements || !allNodeElements.length) {
-                return;
-            }
-            const allLinkElements = this._linkMark.getGraphics();
-            if (!allLinkElements || !allLinkElements.length) {
-                return;
-            }
-            const father = ((_a = getDatumOfGraphic(allLinkElements[0])) === null || _a === void 0 ? void 0 : _a.parents) ? 'parents' : 'source';
-            if (father === 'source') {
-                const highlightNodes = [nodeDatum.key];
-                const highlightLinks = [];
-                allLinkElements.forEach((linkEl, i) => {
-                    var _a, _b, _c, _d;
-                    const linkDatum = getDatumOfGraphic(linkEl);
-                    const father = (linkDatum === null || linkDatum === void 0 ? void 0 : linkDatum.parents) ? 'parents' : 'source';
-                    if (array(linkDatum[father]).includes(nodeDatum.key)) {
-                        if (!highlightLinks.includes((_a = linkDatum.key) !== null && _a !== void 0 ? _a : linkDatum.index)) {
-                            highlightLinks.push((_b = linkDatum.key) !== null && _b !== void 0 ? _b : linkDatum.index);
-                        }
-                        if (!highlightNodes.includes(linkDatum.source)) {
-                            highlightNodes.push(linkDatum.source);
-                        }
-                        if (!highlightNodes.includes(linkDatum.target)) {
-                            highlightNodes.push(linkDatum.target);
-                            const targetNode = allNodeElements.find(nodeElement => {
-                                return nodeElement.data[0].key === linkDatum.target;
-                            });
-                            let targetNodeSourceLinks = targetNode.data[0].sourceLinks;
-                            while ((targetNodeSourceLinks === null || targetNodeSourceLinks === void 0 ? void 0 : targetNodeSourceLinks.length) > 0) {
-                                const newTargetNodeSourceLinks = [];
-                                targetNodeSourceLinks.forEach((targetNodeSourceLinkDatum) => {
-                                    var _a, _b;
-                                    if (!highlightLinks.includes((_a = targetNodeSourceLinkDatum.key) !== null && _a !== void 0 ? _a : targetNodeSourceLinkDatum.index)) {
-                                        highlightLinks.push((_b = targetNodeSourceLinkDatum.key) !== null && _b !== void 0 ? _b : targetNodeSourceLinkDatum.index);
-                                        if (!highlightNodes.includes(targetNodeSourceLinkDatum.target)) {
-                                            highlightNodes.push(targetNodeSourceLinkDatum.target);
-                                            const sourceNodeTemp = allNodeElements.find(nodeElement => {
-                                                return nodeElement.data[0].key === targetNodeSourceLinkDatum.target;
-                                            });
-                                            newTargetNodeSourceLinks.push(sourceNodeTemp.data[0].targetLinks);
-                                        }
-                                        else {
-                                            return;
-                                        }
-                                    }
-                                    else {
-                                        return;
-                                    }
-                                });
-                                targetNodeSourceLinks = newTargetNodeSourceLinks;
-                                return;
-                            }
-                        }
-                    }
-                    else if (linkDatum.target === nodeDatum.key) {
-                        if (!highlightLinks.includes((_c = linkDatum.key) !== null && _c !== void 0 ? _c : linkDatum.index)) {
-                            highlightLinks.push((_d = linkDatum.key) !== null && _d !== void 0 ? _d : linkDatum.index);
-                        }
-                        if (!highlightNodes.includes(linkDatum.source)) {
-                            highlightNodes.push(linkDatum.source);
-                            const sourceNode = allNodeElements.find(nodeElement => {
-                                return nodeElement.data[0].key === linkDatum.source;
-                            });
-                            let sourceNodeTargetLinks = sourceNode.data[0].targetLinks;
-                            while ((sourceNodeTargetLinks === null || sourceNodeTargetLinks === void 0 ? void 0 : sourceNodeTargetLinks.length) > 0) {
-                                const newSourceNodeTargetLinks = [];
-                                sourceNodeTargetLinks.forEach((sourceNodeTargetLinkDatum) => {
-                                    var _a, _b;
-                                    if (!highlightLinks.includes((_a = sourceNodeTargetLinkDatum.key) !== null && _a !== void 0 ? _a : sourceNodeTargetLinkDatum.index)) {
-                                        highlightLinks.push((_b = sourceNodeTargetLinkDatum.key) !== null && _b !== void 0 ? _b : sourceNodeTargetLinkDatum.index);
-                                        if (!highlightNodes.includes(sourceNodeTargetLinkDatum.source)) {
-                                            highlightNodes.push(sourceNodeTargetLinkDatum.source);
-                                            const sourceNodeTemp = allNodeElements.find(nodeElement => {
-                                                return nodeElement.data[0].key === sourceNodeTargetLinkDatum.source;
-                                            });
-                                            newSourceNodeTargetLinks.push(sourceNodeTemp.data[0].targetLinks);
-                                        }
-                                        else {
-                                            return;
-                                        }
-                                    }
-                                    else {
-                                        return;
-                                    }
-                                });
-                                sourceNodeTargetLinks = newSourceNodeTargetLinks;
-                                return;
-                            }
-                        }
-                    }
-                });
-                if (this._linkMark) {
-                    const allLinkElements = this._linkMark.getGraphics();
-                    if (!allLinkElements || !allLinkElements.length) {
-                        return;
-                    }
-                    allLinkElements.forEach((linkEl, i) => {
-                        var _a;
-                        const linkDatum = getDatumOfGraphic(linkEl);
-                        if (highlightLinks.includes((_a = linkDatum.key) !== null && _a !== void 0 ? _a : linkDatum.index)) {
-                            linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
-                        }
-                        else {
-                            linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                            linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
-                        }
-                    });
-                }
-                if (this._nodeMark) {
-                    this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
-                }
-            }
-            else {
-                const highlightNodes = [nodeDatum.key];
-                const upstreamLinks = nodeDatum.targetLinks.reduce((res, link) => {
-                    const dividedLinks = array(link.datum);
-                    dividedLinks.forEach(dividedLink => {
-                        const parents = dividedLink.parents;
-                        const len = parents.length;
-                        for (let i = 0; i < len; i++) {
-                            const source = parents[i].key;
-                            const target = parents[i + 1] ? parents[i + 1].key : nodeDatum.key;
-                            const value = dividedLink.value;
-                            const existingItem = res.find(item => item.source === source && item.target === target);
-                            if (existingItem) {
-                                existingItem.value += value;
-                            }
-                            else {
-                                res.push({ source, target, value });
-                            }
-                        }
-                    });
-                    return res;
-                }, []);
-                allLinkElements.forEach((linkEl, i) => {
-                    const linkDatum = getDatumOfGraphic(linkEl);
-                    const originalDatum = linkDatum.datum;
-                    const selectedDatum = originalDatum
-                        ? originalDatum.filter((entry) => entry[father].some((par) => par.key === nodeDatum.key))
-                        : null;
-                    const upSelectedLink = upstreamLinks.find((upLink) => upLink.source === linkDatum.source && upLink.target === linkDatum.target);
-                    if (selectedDatum && selectedDatum.length) {
-                        if (!highlightNodes.includes(linkDatum.source)) {
-                            highlightNodes.push(linkDatum.source);
-                        }
-                        if (!highlightNodes.includes(linkDatum.target)) {
-                            highlightNodes.push(linkDatum.target);
-                        }
-                        const val = selectedDatum.reduce((sum, d) => {
-                            return (sum += d.value);
-                        }, 0);
-                        const ratio = val / linkDatum.value;
-                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio });
-                        return;
-                    }
-                    if (upSelectedLink) {
-                        if (!highlightNodes.includes(linkDatum.source)) {
-                            highlightNodes.push(linkDatum.source);
-                        }
-                        if (!highlightNodes.includes(linkDatum.target)) {
-                            highlightNodes.push(linkDatum.target);
-                        }
-                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
-                            ratio: upSelectedLink.value / linkDatum.value
-                        });
-                        return;
-                    }
-                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                    linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
-                    return;
-                });
-                if (this._nodeMark) {
-                    this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
-                }
-            }
-            this._needClear = true;
-        };
-        this._handleLinkRelatedClick = (graphic) => {
-            const allNodeElements = this._nodeMark.getGraphics();
-            if (!allNodeElements || !allNodeElements.length) {
-                return;
-            }
-            const allLinkElements = this._linkMark.getGraphics();
-            if (!allLinkElements || !allLinkElements.length) {
-                return;
-            }
-            const father = getDatumOfGraphic(graphic) ? 'parents' : 'source';
-            if (father === 'source') {
-                if (this._linkMark) {
-                    allLinkElements.forEach(linkEl => {
-                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                    });
-                }
-                if (this._nodeMark) {
-                    allNodeElements.forEach(el => {
-                        el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                        el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                    });
-                }
-            }
-            else {
-                const curLinkDatum = getDatumOfGraphic(graphic);
-                const highlightNodes = [curLinkDatum.source, curLinkDatum.target];
-                const upstreamLinks = [];
-                const dividedLinks = array(curLinkDatum.datum);
-                dividedLinks.forEach(dividedLink => {
-                    const parents = dividedLink.parents;
-                    const len = parents.length;
-                    for (let i = 0; i < len - 1; i++) {
-                        const source = parents[i].key;
-                        const target = parents[i + 1].key;
-                        const value = dividedLink.value;
-                        const existingItem = upstreamLinks.find(item => item.source === source && item.target === target);
-                        upstreamLinks.push({
-                            source: parents[i].key,
-                            target: parents[i + 1].key,
-                            value: dividedLink.value
-                        });
-                        if (existingItem) {
-                            existingItem.value += value;
-                        }
-                        else {
-                            upstreamLinks.push({ source, target, value });
-                        }
-                    }
-                });
-                allLinkElements.forEach(linkEl => {
-                    const linkDatum = getDatumOfGraphic(linkEl);
-                    const originalDatum = linkDatum.datum;
-                    if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) {
-                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 });
-                        return;
-                    }
-                    const selectedDatum = originalDatum
-                        ? originalDatum.filter((entry) => {
-                            const parentKeysList = entry.parents.map((item) => item.key);
-                            return parentKeysList.includes(curLinkDatum.source) && parentKeysList.includes(curLinkDatum.target);
-                        })
-                        : null;
-                    if (selectedDatum && selectedDatum.length) {
-                        if (!highlightNodes.includes(linkDatum.source)) {
-                            highlightNodes.push(linkDatum.source);
-                        }
-                        if (!highlightNodes.includes(linkDatum.target)) {
-                            highlightNodes.push(linkDatum.target);
-                        }
-                        const val = selectedDatum
-                            .filter((entry) => {
-                            return entry.parents.some((par, index) => {
-                                var _a;
-                                return par.key === curLinkDatum.source && ((_a = entry.parents[index + 1]) === null || _a === void 0 ? void 0 : _a.key) === curLinkDatum.target;
-                            });
-                        })
-                            .reduce((sum, d) => {
-                            return (sum += d.value);
-                        }, 0);
-                        const ratio = val / linkDatum.value;
-                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio });
-                        return;
-                    }
-                    const upSelectedLink = upstreamLinks.find((upLink) => upLink.source === linkDatum.source && upLink.target === linkDatum.target);
-                    if (upSelectedLink) {
-                        if (!highlightNodes.includes(linkDatum.source)) {
-                            highlightNodes.push(linkDatum.source);
-                        }
-                        if (!highlightNodes.includes(linkDatum.target)) {
-                            highlightNodes.push(linkDatum.target);
-                        }
-                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
-                            ratio: upSelectedLink.value / linkDatum.value
-                        });
-                        return;
-                    }
-                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                    linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
-                    return;
-                });
-                this._highLightElements(allNodeElements, highlightNodes);
-            }
-            this._needClear = true;
-        };
     }
     get direction() {
         var _a;
@@ -83505,6 +83219,380 @@ class SankeySeries extends CartesianSeries {
     linksSeriesDataUpdate() {
         this._linkMark.getData().updateData();
     }
+    _handleClearEmpty() {
+        var _a, _b;
+        if (!this._needClear) {
+            return;
+        }
+        const allNodeElements = (_a = this._nodeMark) === null || _a === void 0 ? void 0 : _a.getGraphics();
+        if (!allNodeElements || !allNodeElements.length) {
+            return;
+        }
+        const allLinkElements = (_b = this._linkMark) === null || _b === void 0 ? void 0 : _b.getGraphics();
+        if (!allLinkElements || !allLinkElements.length) {
+            return;
+        }
+        allNodeElements.forEach(el => {
+            el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+            el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+        });
+        allLinkElements.forEach(el => {
+            el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+            el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+        });
+        this._needClear = false;
+    }
+    _handleNodeAdjacencyClick(graphic) {
+        const nodeDatum = getDatumOfGraphic(graphic);
+        const highlightNodes = [nodeDatum.key];
+        if (this._linkMark) {
+            const allLinkElements = this._linkMark.getGraphics();
+            if (!allLinkElements || !allLinkElements.length) {
+                return;
+            }
+            allLinkElements.forEach((linkEl, i) => {
+                const linkDatum = getDatumOfGraphic(linkEl);
+                if (linkDatum.source === nodeDatum.key) {
+                    if (!highlightNodes.includes(linkDatum.target)) {
+                        highlightNodes.push(linkDatum.target);
+                    }
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                    linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                }
+                else if (linkDatum.target === nodeDatum.key) {
+                    if (!highlightNodes.includes(linkDatum.source)) {
+                        highlightNodes.push(linkDatum.source);
+                    }
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                    linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                }
+                else {
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                    linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                }
+            });
+        }
+        if (this._nodeMark) {
+            this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
+        }
+        this._needClear = true;
+    }
+    _handleLinkAdjacencyClick(graphic) {
+        const curLinkDatum = getDatumOfGraphic(graphic);
+        const highlightNodes = [curLinkDatum.source, curLinkDatum.target];
+        if (this._linkMark) {
+            const allLinkElements = this._linkMark.getGraphics();
+            if (!allLinkElements || !allLinkElements.length) {
+                return;
+            }
+            allLinkElements.forEach(linkEl => {
+                if (linkEl === graphic) {
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                    addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 });
+                }
+                else {
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                    linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                }
+            });
+        }
+        if (this._nodeMark) {
+            this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
+        }
+        this._needClear = true;
+    }
+    _handleNodeRelatedClick(graphic) {
+        var _a;
+        const nodeDatum = getDatumOfGraphic(graphic);
+        const allNodeElements = this._nodeMark.getGraphics();
+        if (!allNodeElements || !allNodeElements.length) {
+            return;
+        }
+        const allLinkElements = this._linkMark.getGraphics();
+        if (!allLinkElements || !allLinkElements.length) {
+            return;
+        }
+        const father = ((_a = getDatumOfGraphic(allLinkElements[0])) === null || _a === void 0 ? void 0 : _a.parents) ? 'parents' : 'source';
+        if (father === 'source') {
+            const highlightNodes = [nodeDatum.key];
+            const highlightLinks = [];
+            allLinkElements.forEach((linkEl, i) => {
+                var _a, _b, _c, _d;
+                const linkDatum = getDatumOfGraphic(linkEl);
+                const father = (linkDatum === null || linkDatum === void 0 ? void 0 : linkDatum.parents) ? 'parents' : 'source';
+                if (array(linkDatum[father]).includes(nodeDatum.key)) {
+                    if (!highlightLinks.includes((_a = linkDatum.key) !== null && _a !== void 0 ? _a : linkDatum.index)) {
+                        highlightLinks.push((_b = linkDatum.key) !== null && _b !== void 0 ? _b : linkDatum.index);
+                    }
+                    if (!highlightNodes.includes(linkDatum.source)) {
+                        highlightNodes.push(linkDatum.source);
+                    }
+                    if (!highlightNodes.includes(linkDatum.target)) {
+                        highlightNodes.push(linkDatum.target);
+                        const targetNode = allNodeElements.find(nodeElement => {
+                            return nodeElement.data[0].key === linkDatum.target;
+                        });
+                        let targetNodeSourceLinks = targetNode.data[0].sourceLinks;
+                        while ((targetNodeSourceLinks === null || targetNodeSourceLinks === void 0 ? void 0 : targetNodeSourceLinks.length) > 0) {
+                            const newTargetNodeSourceLinks = [];
+                            targetNodeSourceLinks.forEach((targetNodeSourceLinkDatum) => {
+                                var _a, _b;
+                                if (!highlightLinks.includes((_a = targetNodeSourceLinkDatum.key) !== null && _a !== void 0 ? _a : targetNodeSourceLinkDatum.index)) {
+                                    highlightLinks.push((_b = targetNodeSourceLinkDatum.key) !== null && _b !== void 0 ? _b : targetNodeSourceLinkDatum.index);
+                                    if (!highlightNodes.includes(targetNodeSourceLinkDatum.target)) {
+                                        highlightNodes.push(targetNodeSourceLinkDatum.target);
+                                        const sourceNodeTemp = allNodeElements.find(nodeElement => {
+                                            return nodeElement.data[0].key === targetNodeSourceLinkDatum.target;
+                                        });
+                                        newTargetNodeSourceLinks.push(sourceNodeTemp.data[0].targetLinks);
+                                    }
+                                    else {
+                                        return;
+                                    }
+                                }
+                                else {
+                                    return;
+                                }
+                            });
+                            targetNodeSourceLinks = newTargetNodeSourceLinks;
+                            return;
+                        }
+                    }
+                }
+                else if (linkDatum.target === nodeDatum.key) {
+                    if (!highlightLinks.includes((_c = linkDatum.key) !== null && _c !== void 0 ? _c : linkDatum.index)) {
+                        highlightLinks.push((_d = linkDatum.key) !== null && _d !== void 0 ? _d : linkDatum.index);
+                    }
+                    if (!highlightNodes.includes(linkDatum.source)) {
+                        highlightNodes.push(linkDatum.source);
+                        const sourceNode = allNodeElements.find(nodeElement => {
+                            return nodeElement.data[0].key === linkDatum.source;
+                        });
+                        let sourceNodeTargetLinks = sourceNode.data[0].targetLinks;
+                        while ((sourceNodeTargetLinks === null || sourceNodeTargetLinks === void 0 ? void 0 : sourceNodeTargetLinks.length) > 0) {
+                            const newSourceNodeTargetLinks = [];
+                            sourceNodeTargetLinks.forEach((sourceNodeTargetLinkDatum) => {
+                                var _a, _b;
+                                if (!highlightLinks.includes((_a = sourceNodeTargetLinkDatum.key) !== null && _a !== void 0 ? _a : sourceNodeTargetLinkDatum.index)) {
+                                    highlightLinks.push((_b = sourceNodeTargetLinkDatum.key) !== null && _b !== void 0 ? _b : sourceNodeTargetLinkDatum.index);
+                                    if (!highlightNodes.includes(sourceNodeTargetLinkDatum.source)) {
+                                        highlightNodes.push(sourceNodeTargetLinkDatum.source);
+                                        const sourceNodeTemp = allNodeElements.find(nodeElement => {
+                                            return nodeElement.data[0].key === sourceNodeTargetLinkDatum.source;
+                                        });
+                                        newSourceNodeTargetLinks.push(sourceNodeTemp.data[0].targetLinks);
+                                    }
+                                    else {
+                                        return;
+                                    }
+                                }
+                                else {
+                                    return;
+                                }
+                            });
+                            sourceNodeTargetLinks = newSourceNodeTargetLinks;
+                            return;
+                        }
+                    }
+                }
+            });
+            if (this._linkMark) {
+                const allLinkElements = this._linkMark.getGraphics();
+                if (!allLinkElements || !allLinkElements.length) {
+                    return;
+                }
+                allLinkElements.forEach((linkEl, i) => {
+                    var _a;
+                    const linkDatum = getDatumOfGraphic(linkEl);
+                    if (highlightLinks.includes((_a = linkDatum.key) !== null && _a !== void 0 ? _a : linkDatum.index)) {
+                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                        linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                    }
+                    else {
+                        linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                        linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                    }
+                });
+            }
+            if (this._nodeMark) {
+                this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
+            }
+        }
+        else {
+            const highlightNodes = [nodeDatum.key];
+            const upstreamLinks = nodeDatum.targetLinks.reduce((res, link) => {
+                const dividedLinks = array(link.datum);
+                dividedLinks.forEach(dividedLink => {
+                    const parents = dividedLink.parents;
+                    const len = parents.length;
+                    for (let i = 0; i < len; i++) {
+                        const source = parents[i].key;
+                        const target = parents[i + 1] ? parents[i + 1].key : nodeDatum.key;
+                        const value = dividedLink.value;
+                        const existingItem = res.find(item => item.source === source && item.target === target);
+                        if (existingItem) {
+                            existingItem.value += value;
+                        }
+                        else {
+                            res.push({ source, target, value });
+                        }
+                    }
+                });
+                return res;
+            }, []);
+            allLinkElements.forEach((linkEl, i) => {
+                const linkDatum = getDatumOfGraphic(linkEl);
+                const originalDatum = linkDatum.datum;
+                const selectedDatum = originalDatum
+                    ? originalDatum.filter((entry) => entry[father].some((par) => par.key === nodeDatum.key))
+                    : null;
+                const upSelectedLink = upstreamLinks.find((upLink) => upLink.source === linkDatum.source && upLink.target === linkDatum.target);
+                if (selectedDatum && selectedDatum.length) {
+                    if (!highlightNodes.includes(linkDatum.source)) {
+                        highlightNodes.push(linkDatum.source);
+                    }
+                    if (!highlightNodes.includes(linkDatum.target)) {
+                        highlightNodes.push(linkDatum.target);
+                    }
+                    const val = selectedDatum.reduce((sum, d) => {
+                        return (sum += d.value);
+                    }, 0);
+                    const ratio = val / linkDatum.value;
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                    addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio });
+                    return;
+                }
+                if (upSelectedLink) {
+                    if (!highlightNodes.includes(linkDatum.source)) {
+                        highlightNodes.push(linkDatum.source);
+                    }
+                    if (!highlightNodes.includes(linkDatum.target)) {
+                        highlightNodes.push(linkDatum.target);
+                    }
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                    addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                        ratio: upSelectedLink.value / linkDatum.value
+                    });
+                    return;
+                }
+                linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                return;
+            });
+            if (this._nodeMark) {
+                this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
+            }
+        }
+        this._needClear = true;
+    }
+    _handleLinkRelatedClick(graphic) {
+        const allNodeElements = this._nodeMark.getGraphics();
+        if (!allNodeElements || !allNodeElements.length) {
+            return;
+        }
+        const allLinkElements = this._linkMark.getGraphics();
+        if (!allLinkElements || !allLinkElements.length) {
+            return;
+        }
+        const father = getDatumOfGraphic(graphic) ? 'parents' : 'source';
+        if (father === 'source') {
+            if (this._linkMark) {
+                allLinkElements.forEach(linkEl => {
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                });
+            }
+            if (this._nodeMark) {
+                allNodeElements.forEach(el => {
+                    el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                    el.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                });
+            }
+        }
+        else {
+            const curLinkDatum = getDatumOfGraphic(graphic);
+            const highlightNodes = [curLinkDatum.source, curLinkDatum.target];
+            const upstreamLinks = [];
+            const dividedLinks = array(curLinkDatum.datum);
+            dividedLinks.forEach(dividedLink => {
+                const parents = dividedLink.parents;
+                const len = parents.length;
+                for (let i = 0; i < len - 1; i++) {
+                    const source = parents[i].key;
+                    const target = parents[i + 1].key;
+                    const value = dividedLink.value;
+                    const existingItem = upstreamLinks.find(item => item.source === source && item.target === target);
+                    upstreamLinks.push({
+                        source: parents[i].key,
+                        target: parents[i + 1].key,
+                        value: dividedLink.value
+                    });
+                    if (existingItem) {
+                        existingItem.value += value;
+                    }
+                    else {
+                        upstreamLinks.push({ source, target, value });
+                    }
+                }
+            });
+            allLinkElements.forEach(linkEl => {
+                const linkDatum = getDatumOfGraphic(linkEl);
+                const originalDatum = linkDatum.datum;
+                if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) {
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                    addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 });
+                    return;
+                }
+                const selectedDatum = originalDatum
+                    ? originalDatum.filter((entry) => {
+                        const parentKeysList = entry.parents.map((item) => item.key);
+                        return parentKeysList.includes(curLinkDatum.source) && parentKeysList.includes(curLinkDatum.target);
+                    })
+                    : null;
+                if (selectedDatum && selectedDatum.length) {
+                    if (!highlightNodes.includes(linkDatum.source)) {
+                        highlightNodes.push(linkDatum.source);
+                    }
+                    if (!highlightNodes.includes(linkDatum.target)) {
+                        highlightNodes.push(linkDatum.target);
+                    }
+                    const val = selectedDatum
+                        .filter((entry) => {
+                        return entry.parents.some((par, index) => {
+                            var _a;
+                            return par.key === curLinkDatum.source && ((_a = entry.parents[index + 1]) === null || _a === void 0 ? void 0 : _a.key) === curLinkDatum.target;
+                        });
+                    })
+                        .reduce((sum, d) => {
+                        return (sum += d.value);
+                    }, 0);
+                    const ratio = val / linkDatum.value;
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                    addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio });
+                    return;
+                }
+                const upSelectedLink = upstreamLinks.find((upLink) => upLink.source === linkDatum.source && upLink.target === linkDatum.target);
+                if (upSelectedLink) {
+                    if (!highlightNodes.includes(linkDatum.source)) {
+                        highlightNodes.push(linkDatum.source);
+                    }
+                    if (!highlightNodes.includes(linkDatum.target)) {
+                        highlightNodes.push(linkDatum.target);
+                    }
+                    linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                    addRuntimeState(linkEl, STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                        ratio: upSelectedLink.value / linkDatum.value
+                    });
+                    return;
+                }
+                linkEl.removeState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                linkEl.addState(STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                return;
+            });
+            this._highLightElements(allNodeElements, highlightNodes);
+        }
+        this._needClear = true;
+    }
     _highLightElements(graphics, highlightNodes) {
         if (!graphics || !graphics.length) {
             return;
@@ -89675,11 +89763,15 @@ class Tooltip extends BaseComponent {
             });
         };
         this._handleClickToLock = (params) => {
+            var _a, _b;
             if (this._clickLock) {
                 this._handleChartMouseOut(params);
                 this._clickLock = false;
             }
             else {
+                if (!this._isTooltipShown && !((_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.isTooltipShown) === null || _b === void 0 ? void 0 : _b.call(_a))) {
+                    return;
+                }
                 this._clickLock = true;
             }
         };
@@ -89978,6 +90070,9 @@ class Tooltip extends BaseComponent {
                     return;
                 }
                 this._isEnterTooltip = false;
+                if (this._spec.triggerOff === 'none') {
+                    return;
+                }
                 if (this._cacheEnterableRect) {
                     const newRect = (_a = container.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(container);
                     if (newRect &&
@@ -89994,7 +90089,10 @@ class Tooltip extends BaseComponent {
         const activeType = this._spec.activeType;
         this.processor = {};
         activeType.forEach(type => {
-            this.processor[type] = Factory.createTooltipProcessor(type, this);
+            const instance = Factory.createTooltipProcessor(type, this);
+            if (instance) {
+                this.processor[type] = instance;
+            }
         });
     }
     _initEvent() {
@@ -90422,7 +90520,7 @@ class BaseCrossHair extends BaseComponent {
             this.event.off(eventName, handler);
         }
     }
-    updateLayoutAttribute() {
+    onBeforeRender() {
         this._limitBounds = null;
         this._showDefaultCrosshair();
     }
@@ -91306,7 +91404,7 @@ const dataFilterWithNewDomain = (data, op) => {
     return data.filter(filter);
 };
 const dataFilterComputeDomain = (data, op) => {
-    const { stateFields, valueFields, dataCollection, isCategoryState, seriesTypes } = op.input;
+    const { stateFields, valueFields, dataCollection, isCategoryState } = op.input;
     const { stateField, valueField } = op.output;
     const resultObj = {};
     const resultData = [];
@@ -91327,8 +91425,7 @@ const dataFilterComputeDomain = (data, op) => {
                 }
             });
         }
-        const data = seriesTypes[i] === 'dot' ? objFlat(dv.latestData, 'dots') : dv.latestData;
-        data.forEach((d) => {
+        dv.latestData.forEach((d) => {
             array(stateFields[i]).forEach(state => {
                 if (!isNil$1(d[state])) {
                     if (isNil$1(resultObj[d[state]])) {
@@ -91413,39 +91510,30 @@ class DataFilterBaseComponent extends BaseComponent {
         const axisScale = axis.getScale();
         const reverse = this._isReverse();
         const newRangeFactor = reverse ? [1 - this._end, 1 - this._start] : [this._start, this._end];
-        const linkedAxis = this._linkedAxisComponent;
         if (reverse) {
             switch (tag) {
                 case 'startHandler':
                     axis.scaleRangeFactorEnd(newRangeFactor[1]);
-                    linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorEnd(newRangeFactor[1]);
                     break;
                 case 'endHandler':
                     axis.scaleRangeFactorStart(newRangeFactor[0]);
-                    linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorStart(newRangeFactor[0]);
                     break;
                 default:
                     axis.scaleRangeFactorStart(newRangeFactor[0], true);
                     axis.scaleRangeFactorEnd(newRangeFactor[1]);
-                    linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorStart(newRangeFactor[0], true);
-                    linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorEnd(newRangeFactor[1]);
             }
         }
         else {
             switch (tag) {
                 case 'startHandler':
                     axis.scaleRangeFactorStart(newRangeFactor[0]);
-                    linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorStart(newRangeFactor[0]);
                     break;
                 case 'endHandler':
                     axis.scaleRangeFactorEnd(newRangeFactor[1]);
-                    linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorEnd(newRangeFactor[1]);
                     break;
                 default:
                     axis.scaleRangeFactorEnd(newRangeFactor[1], true);
-                    linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorEnd(newRangeFactor[1], true);
                     axis.scaleRangeFactorStart(newRangeFactor[0]);
-                    linkedAxis === null || linkedAxis === void 0 ? void 0 : linkedAxis.scaleRangeFactorStart(newRangeFactor[0]);
             }
         }
         const newFactor = axisScale.rangeFactor();
@@ -91627,12 +91715,6 @@ class DataFilterBaseComponent extends BaseComponent {
         else if (isValid$1(this._spec.axisIndex)) {
             this._relatedAxisComponent = this._option.getComponentByIndex('axes', this._spec.axisIndex);
         }
-        if (isValid$1(this._spec.linkedAxisId)) {
-            this._linkedAxisComponent = this._option.getComponentByUserId(this._spec.linkedAxisId);
-        }
-        else if (isValid$1(this._spec.linkedAxisIndex)) {
-            this._linkedAxisComponent = this._option.getComponentByIndex('axes', this._spec.linkedAxisIndex);
-        }
         if (isNil$1(this._spec.field) && !this._relatedAxisComponent) {
             const axes = this._option.getComponentsByKey('axes');
             const sameOrientAxis = axes.find((cm) => cm._orient === this._orient);
@@ -91715,15 +91797,11 @@ class DataFilterBaseComponent extends BaseComponent {
         const dataCollection = [];
         const stateFields = [];
         const valueFields = [];
-        const seriesTypes = [];
         let isCategoryState;
         if (this._relatedAxisComponent) {
             const originalStateFields = {};
             eachSeries(this._regions, s => {
                 var _a, _b;
-                if (s.type === 'link') {
-                    return;
-                }
                 const xAxisHelper = s.coordinate === 'cartesian'
                     ? s.getXAxisHelper()
                     : s.coordinate === 'polar'
@@ -91746,7 +91824,6 @@ class DataFilterBaseComponent extends BaseComponent {
                             : yAxisHelper;
                 const valueAxisHelper = stateAxisHelper === xAxisHelper ? yAxisHelper : xAxisHelper;
                 dataCollection.push(s.getRawData());
-                seriesTypes.push(s.type);
                 const seriesSpec = s.getSpec();
                 const xField = s.coordinate === 'cartesian'
                     ? array(seriesSpec.xField)
@@ -91765,7 +91842,7 @@ class DataFilterBaseComponent extends BaseComponent {
                 }
                 if (this._valueField) {
                     const valueField = s.type === 'link' ? ['from_yField'] : valueAxisHelper === xAxisHelper ? xField : yField;
-                    if (isContinuous(valueAxisHelper.getScale(0).type) || s.type === 'dot') {
+                    if (isContinuous(valueAxisHelper.getScale(0).type)) {
                         valueFields.push(...valueField);
                     }
                 }
@@ -91798,8 +91875,7 @@ class DataFilterBaseComponent extends BaseComponent {
                     dataCollection: dataCollection,
                     stateFields,
                     valueFields,
-                    isCategoryState,
-                    seriesTypes
+                    isCategoryState
                 },
                 output: {
                     stateField: this._stateField,
@@ -91807,9 +91883,9 @@ class DataFilterBaseComponent extends BaseComponent {
                 }
             }
         }, false);
+        this._data = new CompilableData(this._option, data);
         data.reRunAllTransform();
         dataSet.multipleDataViewAddListener(dataCollection, 'change', this._handleDataCollectionChange.bind(this));
-        this._data = new CompilableData(this._option, data);
     }
     setAttrFromSpec() {
         var _a;
@@ -92007,7 +92083,7 @@ class DataFilterBaseComponent extends BaseComponent {
     _initCommonEvent() {
         var _a, _b, _c, _d, _e, _f, _g;
         const delayType = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.delayType) !== null && _b !== void 0 ? _b : 'throttle';
-        const delayTime = isValid$1((_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayType) ? ((_e = (_d = this._spec) === null || _d === void 0 ? void 0 : _d.delayTime) !== null && _e !== void 0 ? _e : 30) : 0;
+        const delayTime = isValid$1((_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayType) ? (_e = (_d = this._spec) === null || _d === void 0 ? void 0 : _d.delayTime) !== null && _e !== void 0 ? _e : 30 : 0;
         const realTime = (_g = (_f = this._spec) === null || _f === void 0 ? void 0 : _f.realTime) !== null && _g !== void 0 ? _g : true;
         const option = { delayType, delayTime, realTime, allowComponentZoom: true };
         if (this._zoomAttr.enable) {
@@ -95155,6 +95231,7 @@ class Player extends BaseComponent {
             this._option.globalInstance.on(ChartEvent.rendered, () => {
                 var _a;
                 if ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.auto) {
+                    this._playerComponent.pause();
                     this._playerComponent.play();
                 }
             });
@@ -96546,6 +96623,7 @@ class Brush extends BaseComponent {
             var _a;
             this._setRegionMarkPickable(region, true);
             const { operateMask } = e.detail;
+            const { updateElementsState = true } = this._spec;
             if ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.onBrushEnd) {
                 if (this._spec.onBrushEnd(e) === true) {
                     this.clearGraphic();
@@ -96559,7 +96637,7 @@ class Brush extends BaseComponent {
             }
             else {
                 const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
-                if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) {
+                if ((!this._spec.zoomWhenEmpty && inBrushData.length > 0) || !updateElementsState) {
                     this._setAxisAndDataZoom(operateMask, region);
                 }
                 this._emitEvent(ChartEvent.brushEnd, region);
@@ -96568,8 +96646,9 @@ class Brush extends BaseComponent {
         brush.addEventListener(IOperateType.moveEnd, (e) => {
             this._setRegionMarkPickable(region, true);
             const { operateMask } = e.detail;
+            const { updateElementsState = true } = this._spec;
             const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
-            if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) {
+            if ((!this._spec.zoomWhenEmpty && inBrushData.length > 0) || updateElementsState) {
                 this._setAxisAndDataZoom(operateMask, region);
             }
             this._emitEvent(ChartEvent.brushEnd, region);
@@ -96611,8 +96690,11 @@ class Brush extends BaseComponent {
     }
     _handleBrushChange(region, e) {
         const { operateMask } = e.detail;
-        this._reconfigItem(operateMask, region);
-        this._reconfigLinkedItem(operateMask, region);
+        const { updateElementsState = true } = this._spec;
+        if (updateElementsState) {
+            this._reconfigItem(operateMask, region);
+            this._reconfigLinkedItem(operateMask, region);
+        }
     }
     _extendDataInBrush(elementsMap) {
         var _a, _b;
@@ -96948,7 +97030,6 @@ class CustomMark extends BaseComponent {
         if (!this._spec) {
             return;
         }
-        const hasAnimation = this._option.animation !== false;
         let parentMark = null;
         if (this._spec.parent) {
             const mark = this.getChart()
@@ -96958,12 +97039,10 @@ class CustomMark extends BaseComponent {
                 parentMark = mark;
             }
         }
-        this._createExtensionMark(this._spec, parentMark, `${PREFIX}_series_${this.id}_extensionMark`, 0, {
-            hasAnimation
-        });
+        this._createExtensionMark(this._spec, parentMark, `${PREFIX}_series_${this.id}_extensionMark`, 0);
     }
-    _createExtensionMark(spec, parentMark, namePrefix, index = 0, options) {
-        var _a;
+    _createExtensionMark(spec, parentMark, namePrefix, index = 0) {
+        var _a, _b;
         const mark = this._createMark({
             type: spec.type,
             name: isValid$1(spec.name) ? `${spec.name}` : `${namePrefix}_${index}`
@@ -96979,7 +97058,7 @@ class CustomMark extends BaseComponent {
         if (isValid$1(spec.id)) {
             mark.setUserId(spec.id);
         }
-        if (options.hasAnimation && spec.animation) {
+        if (((_a = this._option.globalInstance) === null || _a === void 0 ? void 0 : _a.isAnimationEnable()) && spec.animation) {
             const config = animationConfig({}, userAnimationConfig(spec.type, spec, this._markAttributeContext));
             mark.setAnimationConfig(config);
         }
@@ -96992,8 +97071,8 @@ class CustomMark extends BaseComponent {
         this.initMarkStyleWithSpec(mark, spec);
         if (spec.type === 'group') {
             namePrefix = `${namePrefix}_${index}`;
-            (_a = spec.children) === null || _a === void 0 ? void 0 : _a.forEach((s, i) => {
-                this._createExtensionMark(s, mark, namePrefix, i, options);
+            (_b = spec.children) === null || _b === void 0 ? void 0 : _b.forEach((s, i) => {
+                this._createExtensionMark(s, mark, namePrefix, i);
             });
         }
         if (isValid$1(spec.dataId) || isValidNumber$1(spec.dataIndex)) {
@@ -97863,14 +97942,15 @@ const getDomStyle = (spec = {}) => {
     const marginKey = align === 'right' ? 'marginLeft' : 'marginRight';
     if (align === 'right') {
         panelStyle.direction = 'rtl';
-        titleStyle.textAlign = 'right';
-        keyStyle.textAlign = 'right';
-        valueStyle.textAlign = 'left';
     }
-    else {
-        titleStyle.textAlign = 'left';
-        keyStyle.textAlign = 'left';
-        valueStyle.textAlign = 'right';
+    if (isNil$1(titleStyle.textAlign)) {
+        titleStyle.textAlign = align === 'right' ? 'right' : 'left';
+    }
+    if (isNil$1(keyStyle.textAlign)) {
+        keyStyle.textAlign = align === 'right' ? 'right' : 'left';
+    }
+    if (isNil$1(valueStyle.textAlign)) {
+        valueStyle.textAlign = align === 'right' ? 'left' : 'right';
     }
     shapeStyle[marginKey] = getPixelPropertyStr((_b = shape.spacing) !== null && _b !== void 0 ? _b : DEFAULT_SHAPE_SPACING);
     keyStyle[marginKey] = getPixelPropertyStr((_c = keyLabel.spacing) !== null && _c !== void 0 ? _c : DEFAULT_KEY_SPACING);
@@ -98061,7 +98141,7 @@ class DomTooltipHandler extends BaseTooltipHandler {
         if (!changePositionOnly) {
             this._updateDomStringByCol(actualTooltip);
         }
-        this._updateDomStyle('height');
+        this._updateDomStyle('height', changePositionOnly);
         const rect = (_a = this._rootDom) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         return {
             width: rect === null || rect === void 0 ? void 0 : rect.width,
@@ -98206,7 +98286,7 @@ class DomTooltipHandler extends BaseTooltipHandler {
             contentDom.parentNode.removeChild(contentDom);
         }
     }
-    _updateDomStyle(sizeKey = 'width') {
+    _updateDomStyle(sizeKey = 'width', refreshSize) {
         var _a, _b, _c, _d, _e;
         const rootDom = this._rootDom;
         const contentDom = [...rootDom.children].find(child => child.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME));
@@ -98249,6 +98329,9 @@ class DomTooltipHandler extends BaseTooltipHandler {
                     const row = rows[i];
                     const cols = (_d = row.children) !== null && _d !== void 0 ? _d : [];
                     for (let j = 0; j < cols.length; j++) {
+                        if (refreshSize) {
+                            cols[j].style[sizeKey] = 'initial';
+                        }
                         const width = cols[j].getBoundingClientRect()[sizeKey];
                         if (widthByCol[j] === undefined || widthByCol[j] < width) {
                             widthByCol[j] = width;
@@ -98280,7 +98363,7 @@ class DomTooltipHandler extends BaseTooltipHandler {
         }
         if (this.getVisibility()) {
             this._updateDomStringByCol(this._tooltipActual);
-            this._updateDomStyle('height');
+            this._updateDomStyle('height', false);
         }
     }
     _updatePosition({ x, y }) {
@@ -100187,4 +100270,4 @@ function registerSequentialAnimate() {
     mixin(BaseMark, SequentialAnimate);
 }
 
-export { ArcMark, AreaChart, AreaMark, AreaSeries, AttributeLevel, AxisSyncPlugin, BandAxisMixin, BarChart, BarChartSpecTransformer, BarSeries, BarSeriesSpecTransformer, BaseArcMark, BaseChart, BaseChartSpecTransformer, BaseComponent, BaseComponentSpecTransformer, BaseHistogramChart, BaseMark, BasePieChart, BasePieChartSpecTransformer, BasePieSeries, BasePlugin, BasePolygonMark, BaseSeries, BaseSeriesSpecTransformer, BaseSeriesTooltipHelper, BaseWordCloudChart, BaseWordCloudChartSpecTransformer, BaseWordCloudSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, ChartEvent, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, CompilableData, ComponentMark, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_ANIMATION_CONFIG, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CLOSE_STROKE_JOIN, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_KEY, DEFAULT_LAYOUT_RECT_LEVEL, DEFAULT_LAYOUT_RECT_LEVEL_MIN, DEFAULT_LINEAR_INTERPOLATE, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DEFAULT_SMOOTH_INTERPOLATE, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, Direction, DiscreteLegend, DomTooltipHandler, DotSeries, ElementHighlight, ElementSelect, Event$1 as Event, Factory, FormatterPlugin, FunnelChart, FunnelChartSpecTransformer, FunnelSeries, FunnelSeriesSpecTransformer, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GeoSeries, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, HistogramChart, HistogramChartSpecTransformer, ImageMark, Indicator, Label, Layout$1 as Layout, LayoutLevel, LayoutZIndex, LineChart, LineMark, LineSeries, LinearAxisMixin, LinearProgressChart, LinearProgressSeries, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, ManualTicker, MapChart, MapSeries, MarkTypeEnum, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PieChart, PieSeries, PieSeriesSpecTransformer, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, PositionEnum, ProgressLikeSeries, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumnChart, RangeColumnSeries, RangeColumnSeriesSpecTransformer, RectMark, RenderModeEnum, RippleMark, RoseChart, RoseLikeSeries, RoseSeries, RuleMark, SEGMENT_FIELD_END, SEGMENT_FIELD_START, STACK_FIELD_END, STACK_FIELD_END_OffsetSilhouette, STACK_FIELD_END_PERCENT, STACK_FIELD_KEY, STACK_FIELD_START, STACK_FIELD_START_OffsetSilhouette, STACK_FIELD_START_PERCENT, STACK_FIELD_TOTAL, STACK_FIELD_TOTAL_BOTTOM, STACK_FIELD_TOTAL_PERCENT, STACK_FIELD_TOTAL_TOP, STATE_VALUE_ENUM, SankeyChart, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, StreamLight, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TransformLevel, TreemapChart, TreemapSeries, USER_LAYOUT_RECT_LEVEL, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloudChart, WordCloudSeries, alternatingWave, animationConfig, barGrowIn, barGrowOut, barPresetAnimation, baseSeriesMark, boundsInRect, builtinThemes, calcLayoutNumber, calcPadding, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, convertPoint, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createSymbol, createText, darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, findMarkGraphic, functionTransform, getActualColor, getActualNumValue, getCartesianCrosshairRect, getCartesianDimensionInfo, getColorSchemeBySeries, getCombinedSizeOfRegions, getDataScheme, getDatumOfGraphic, getDimensionInfoByValue, getFieldAlias, getFunnelTheme, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getSpecInfo, getTheme, hasThemeMerged, isCollectionMark, isColorKey, isPercent, isPercentOffset, isProgressiveDataColorScheme, isTokenKey, isValidOrient, isXAxis, isYAxis, isZAxis, lightTheme, lookup, measureText, mergeFields, normalizeLayoutPaddingSpec, particleEffect, pieDisappear, pieEnter, pieExit, piePresetAnimation, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, registerAllEnv, registerAllMarks, registerAnimate, registerArcAnimation, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomAnimate, registerCustomMark, registerDataSetInstanceParser, registerDataSetInstanceTransform, registerDataZoom, registerDimensionEvents, registerDimensionHover, registerDimensionTooltipProcessor, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerElementActive, registerElementActiveByLegend, registerElementHighlight, registerElementHighlightByGroup, registerElementHighlightByKey, registerElementHighlightByLegend, registerElementHighlightByName, registerElementSelect, registerFormatPlugin, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGridLayout, registerGroupMark, registerGroupTooltipProcessor, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapSeries, registerMarkArea, registerMarkFilterTransform, registerMarkLine, registerMarkMapTransform, registerMarkPoint, registerMarkTooltipProcessor, registerMediaQuery, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonAnimation, registerPolygonMark, registerPoptip, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRectAnimation, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSequentialAnimate, registerStateTransition, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerAnimate$1 as registerVRenderAnimate, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, shouldMarkDoMorph, snakeWave, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, transformToGraphic, userAnimationConfig, version, vglobal, warn };
+export { ArcMark, AreaChart, AreaMark, AreaSeries, AttributeLevel, AxisSyncPlugin, BandAxisMixin, BarChart, BarChartSpecTransformer, BarSeries, BarSeriesSpecTransformer, BaseArcMark, BaseChart, BaseChartSpecTransformer, BaseComponent, BaseComponentSpecTransformer, BaseHistogramChart, BaseMark, BasePieChart, BasePieChartSpecTransformer, BasePieSeries, BasePlugin, BasePolygonMark, BaseSeries, BaseSeriesSpecTransformer, BaseSeriesTooltipHelper, BaseWordCloudChart, BaseWordCloudChartSpecTransformer, BaseWordCloudSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, ChartEvent, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, CompilableData, ComponentMark, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_ANIMATION_CONFIG, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CLOSE_STROKE_JOIN, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_KEY, DEFAULT_LAYOUT_RECT_LEVEL, DEFAULT_LAYOUT_RECT_LEVEL_MIN, DEFAULT_LINEAR_INTERPOLATE, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DEFAULT_SMOOTH_INTERPOLATE, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, Direction, DiscreteLegend, DomTooltipHandler, DotSeries, ElementHighlight, ElementSelect, Event$1 as Event, Factory, FormatterPlugin, FunnelChart, FunnelChartSpecTransformer, FunnelSeries, FunnelSeriesSpecTransformer, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GeoSeries, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, HistogramChart, HistogramChartSpecTransformer, ImageMark, Indicator, Label, Layout$1 as Layout, LayoutLevel, LayoutZIndex, LineChart, LineMark, LineSeries, LinearAxisMixin, LinearProgressChart, LinearProgressSeries, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, ManualTicker, MapChart, MapSeries, MarkTypeEnum, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PieChart, PieSeries, PieSeriesSpecTransformer, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, PositionEnum, ProgressLikeSeries, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumnChart, RangeColumnSeries, RangeColumnSeriesSpecTransformer, RectMark, RenderModeEnum, RippleMark, RoseChart, RoseLikeSeries, RoseSeries, RuleMark, SEGMENT_FIELD_END, SEGMENT_FIELD_START, STACK_FIELD_END, STACK_FIELD_END_OffsetSilhouette, STACK_FIELD_END_PERCENT, STACK_FIELD_KEY, STACK_FIELD_START, STACK_FIELD_START_OffsetSilhouette, STACK_FIELD_START_PERCENT, STACK_FIELD_TOTAL, STACK_FIELD_TOTAL_BOTTOM, STACK_FIELD_TOTAL_PERCENT, STACK_FIELD_TOTAL_TOP, STATE_VALUE_ENUM, SankeyChart, SankeyChartSpecTransformer, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, StreamLight, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TransformLevel, TreemapChart, TreemapSeries, USER_LAYOUT_RECT_LEVEL, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloudChart, WordCloudSeries, alternatingWave, animationConfig, barGrowIn, barGrowOut, barPresetAnimation, baseSeriesMark, boundsInRect, builtinThemes, calcLayoutNumber, calcPadding, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, convertPoint, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createSymbol, createText, darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, findMarkGraphic, functionTransform, getActualColor, getActualNumValue, getCartesianCrosshairRect, getCartesianDimensionInfo, getColorSchemeBySeries, getCombinedSizeOfRegions, getDataScheme, getDatumOfGraphic, getDiffAttributesOfGraphic, getDimensionInfoByValue, getFieldAlias, getFunnelTheme, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getSpecInfo, getTheme, hasThemeMerged, isCollectionMark, isColorKey, isPercent, isPercentOffset, isProgressiveDataColorScheme, isTokenKey, isValidOrient, isXAxis, isYAxis, isZAxis, lightTheme, lookup, measureText, mergeFields, normalizeLayoutPaddingSpec, particleEffect, pieDisappear, pieEnter, pieExit, piePresetAnimation, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, registerAllEnv, registerAllMarks, registerAnimate, registerArcAnimation, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomAnimate, registerCustomMark, registerDataSetInstanceParser, registerDataSetInstanceTransform, registerDataZoom, registerDimensionEvents, registerDimensionHover, registerDimensionTooltipProcessor, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerElementActive, registerElementActiveByLegend, registerElementHighlight, registerElementHighlightByGroup, registerElementHighlightByKey, registerElementHighlightByLegend, registerElementHighlightByName, registerElementSelect, registerFormatPlugin, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGridLayout, registerGroupMark, registerGroupTooltipProcessor, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapSeries, registerMarkArea, registerMarkFilterTransform, registerMarkLine, registerMarkMapTransform, registerMarkPoint, registerMarkTooltipProcessor, registerMediaQuery, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonAnimation, registerPolygonMark, registerPoptip, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRectAnimation, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSequentialAnimate, registerStateTransition, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerAnimate$1 as registerVRenderAnimate, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, shouldMarkDoMorph, snakeWave, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, transformToGraphic, userAnimationConfig, version, vglobal, warn };