@visactor/vchart 2.0.2 → 2.0.3-alpha.1

package/build/index.js

@@ -16377,14 +16377,10 @@
           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));
@@ -33700,7 +33696,7 @@
     }
     class GrowAngleIn extends GrowAngleBase {
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -33709,7 +33705,7 @@
           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 {
@@ -34317,7 +34313,7 @@
     }
     class GrowRadiusIn extends GrowPointsBase {
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -34326,7 +34322,7 @@
           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 {
@@ -34441,7 +34437,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -34450,7 +34446,7 @@
           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);
@@ -37348,7 +37344,9 @@
           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;
       }
@@ -37365,10 +37363,12 @@
         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;
@@ -47295,6 +47295,22 @@
             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);
+                }
+            }
+        }
+    }
 
     exports.SeriesTypeForThemeEnum = void 0;
     (function (SeriesTypeForThemeEnum) {
@@ -55663,7 +55679,8 @@
                 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);
             }
@@ -55977,7 +55994,7 @@
         }
         _updateAnimateState(initial) {
             var _a, _b;
-            if (this._option.animation) {
+            if (this.isAnimationEnable()) {
                 const updateGraphicAnimationState = (graphic) => {
                     var _a;
                     const diffState = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.diffState;
@@ -56773,6 +56790,12 @@
         _getMode() {
             return this._option.mode || exports.RenderModeEnum['desktop-browser'];
         }
+        isAnimationEnable() {
+            if ('animation' in this._option) {
+                return !!this._option.animation;
+            }
+            return this._spec.animation !== false;
+        }
         _getChartOption(type) {
             return {
                 type,
@@ -56786,7 +56809,6 @@
                 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,
@@ -56910,7 +56932,7 @@
         });
     };
 
-    const version = "2.0.2";
+    const version = "2.0.3-alpha.1";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -57674,7 +57696,7 @@
         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;
@@ -57758,7 +57780,7 @@
                 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);
                 }
@@ -61206,7 +61228,7 @@
             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();
@@ -61243,15 +61265,15 @@
                     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 = {
@@ -65794,15 +65816,15 @@
             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,
@@ -76926,6 +76948,72 @@
         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;
@@ -77059,55 +77147,7 @@
         };
       }
       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 = [],
@@ -77177,16 +77217,7 @@
         };
       }
       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;
@@ -78251,7 +78282,7 @@
       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 = [];
@@ -78261,9 +78292,20 @@
         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) {
@@ -78478,21 +78520,39 @@
         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,
@@ -82876,380 +82936,6 @@
                     }
                 }
             };
-            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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                    el.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                });
-                allLinkElements.forEach(el => {
-                    el.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                    el.removeState(exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            linkEl.addState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
-                        }
-                        else if (linkDatum.target === nodeDatum.key) {
-                            if (!highlightNodes.includes(linkDatum.source)) {
-                                highlightNodes.push(linkDatum.source);
-                            }
-                            linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            linkEl.addState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
-                        }
-                        else {
-                            linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                            linkEl.addState(exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 });
-                        }
-                        else {
-                            linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                            linkEl.addState(exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                                linkEl.addState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
-                            }
-                            else {
-                                linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                                linkEl.addState(exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
-                                ratio: upSelectedLink.value / linkDatum.value
-                            });
-                            return;
-                        }
-                        linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                        linkEl.addState(exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                            linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                        });
-                    }
-                    if (this._nodeMark) {
-                        allNodeElements.forEach(el => {
-                            el.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                            el.removeState(exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-                            addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
-                                ratio: upSelectedLink.value / linkDatum.value
-                            });
-                            return;
-                        }
-                        linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
-                        linkEl.addState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
-                        return;
-                    });
-                    this._highLightElements(allNodeElements, highlightNodes);
-                }
-                this._needClear = true;
-            };
         }
         get direction() {
             var _a;
@@ -83539,6 +83225,380 @@
         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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                el.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+            });
+            allLinkElements.forEach(el => {
+                el.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                el.removeState(exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                        linkEl.addState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                    }
+                    else if (linkDatum.target === nodeDatum.key) {
+                        if (!highlightNodes.includes(linkDatum.source)) {
+                            highlightNodes.push(linkDatum.source);
+                        }
+                        linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                        linkEl.addState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                    }
+                    else {
+                        linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                        linkEl.addState(exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                        addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, { ratio: 1 });
+                    }
+                    else {
+                        linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                        linkEl.addState(exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                            linkEl.addState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, true);
+                        }
+                        else {
+                            linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                            linkEl.addState(exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                        addRuntimeState(linkEl, exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                        addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                            ratio: upSelectedLink.value / linkDatum.value
+                        });
+                        return;
+                    }
+                    linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                    linkEl.addState(exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                        linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                    });
+                }
+                if (this._nodeMark) {
+                    allNodeElements.forEach(el => {
+                        el.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                        el.removeState(exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                        addRuntimeState(linkEl, exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                        addRuntimeState(linkEl, exports.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(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+                        addRuntimeState(linkEl, exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                            ratio: upSelectedLink.value / linkDatum.value
+                        });
+                        return;
+                    }
+                    linkEl.removeState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS);
+                    linkEl.addState(exports.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, true);
+                    return;
+                });
+                this._highLightElements(allNodeElements, highlightNodes);
+            }
+            this._needClear = true;
+        }
         _highLightElements(graphics, highlightNodes) {
             if (!graphics || !graphics.length) {
                 return;
@@ -96976,7 +97036,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!this._spec) {
                 return;
             }
-            const hasAnimation = this._option.animation !== false;
             let parentMark = null;
             if (this._spec.parent) {
                 const mark = this.getChart()
@@ -96986,12 +97045,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     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}`
@@ -97007,7 +97064,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             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);
             }
@@ -97020,8 +97077,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             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)) {
@@ -98090,7 +98147,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             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,
@@ -98235,7 +98292,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 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));
@@ -98278,6 +98335,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         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;
@@ -98309,7 +98369,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             if (this.getVisibility()) {
                 this._updateDomStringByCol(this._tooltipActual);
-                this._updateDomStyle('height');
+                this._updateDomStyle('height', false);
             }
         }
         _updatePosition({ x, y }) {
@@ -100379,6 +100439,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.STACK_FIELD_TOTAL_PERCENT = STACK_FIELD_TOTAL_PERCENT;
     exports.STACK_FIELD_TOTAL_TOP = STACK_FIELD_TOTAL_TOP;
     exports.SankeyChart = SankeyChart;
+    exports.SankeyChartSpecTransformer = SankeyChartSpecTransformer;
     exports.SankeySeries = SankeySeries;
     exports.ScatterChart = ScatterChart;
     exports.ScatterSeries = ScatterSeries;