@visactor/vchart 1.13.20 → 1.13.21-alpha.1

package/build/index.es.js

@@ -62914,6 +62914,16 @@ class ChartPluginService extends BasePluginService {
             plugin.onBeforeInitChart && plugin.onBeforeInitChart(this, chartSpec, actionSource);
         });
     }
+    onLayoutRectUpdate() {
+        this._plugins.forEach(plugin => {
+            plugin.onLayoutRectUpdate && plugin.onLayoutRectUpdate(this);
+        });
+    }
+    onAfterRender() {
+        this._plugins.forEach(plugin => {
+            plugin.onAfterRender && plugin.onAfterRender(this);
+        });
+    }
     releaseAll() {
         super.releaseAll();
         this.globalInstance = null;
@@ -63402,6 +63412,7 @@ class VChart {
             return false;
         }
         this._updateAnimateState();
+        this._chartPluginApply('onAfterRender', this._spec);
         this._event.emit(ChartEvent.rendered, {
             chart: this._chart,
             vchart: this
@@ -64233,7 +64244,8 @@ class VChart {
             getSpecInfo: () => { var _a; return (_a = this._specInfo) !== null && _a !== void 0 ? _a : {}; },
             layout: this._option.layout,
             onError: this._onError,
-            disableTriggerEvent: this._option.disableTriggerEvent === true
+            disableTriggerEvent: this._option.disableTriggerEvent === true,
+            chartPluginApply: (funcName, ...args) => this._chartPluginApply(funcName, ...args)
         };
     }
 }
@@ -64256,7 +64268,7 @@ const registerVChartCore = () => {
 };
 registerVChartCore();
 
-const version = "1.13.20";
+const version = "1.13.21-alpha.1";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -71513,6 +71525,7 @@ class BaseChart extends CompilableBase {
         return (_b = (_a = this.getCompiler()) === null || _a === void 0 ? void 0 : _a.getCanvas()) !== null && _b !== void 0 ? _b : null;
     }
     _updateLayoutRect(viewBox) {
+        var _a, _b;
         const canvasRect = this.getCanvasRect();
         let viewRect = canvasRect;
         if (viewBox) {
@@ -71533,6 +71546,7 @@ class BaseChart extends CompilableBase {
         this._layoutRect.x = this.padding.left;
         this._layoutRect.y = this.padding.top;
         this._event.emit(ChartEvent.layoutRectUpdate, { chart: this });
+        (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.chartPluginApply) === null || _b === void 0 ? void 0 : _b.call(_a, 'onLayoutRectUpdate', { chart: this });
     }
     setCurrentTheme() {
         this.updateChartConfig({ change: true, reMake: false }, this._spec);
@@ -86625,28 +86639,6 @@ class SankeySeries extends CartesianSeries {
                 }
             }
         };
-        this._handleClearEmpty = (highlightState, blurState) => {
-            var _a, _b;
-            if (!this._needClear) {
-                return;
-            }
-            const allNodeElements = (_a = this._nodeMark) === null || _a === void 0 ? void 0 : _a.getProductElements();
-            if (!allNodeElements || !allNodeElements.length) {
-                return;
-            }
-            const allLinkElements = (_b = this._linkMark) === null || _b === void 0 ? void 0 : _b.getProductElements();
-            if (!allLinkElements || !allLinkElements.length) {
-                return;
-            }
-            const states = [highlightState, blurState];
-            allNodeElements.forEach(el => {
-                el.removeState(states);
-            });
-            allLinkElements.forEach(el => {
-                el.removeState(states);
-            });
-            this._needClear = false;
-        };
         this._handleNodeAdjacencyClick = (element, highlightState, blurState) => {
             const nodeDatum = element.getDatum();
             const highlightNodes = [nodeDatum.key];
@@ -86706,293 +86698,6 @@ class SankeySeries extends CartesianSeries {
             }
             this._needClear = true;
         };
-        this._handleNodeRelatedClick = (element, highlightState, blurState) => {
-            var _a;
-            const nodeDatum = element.getDatum();
-            const allNodeElements = this._nodeMark.getProductElements();
-            if (!allNodeElements || !allNodeElements.length) {
-                return;
-            }
-            const allLinkElements = this._linkMark.getProductElements();
-            if (!allLinkElements || !allLinkElements.length) {
-                return;
-            }
-            const father = ((_a = allLinkElements[0].getDatum()) === 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 = linkEl.getDatum();
-                    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.getProductElements();
-                    if (!allLinkElements || !allLinkElements.length) {
-                        return;
-                    }
-                    allLinkElements.forEach((linkEl, i) => {
-                        var _a;
-                        if (highlightLinks.includes((_a = linkEl.getDatum().key) !== null && _a !== void 0 ? _a : linkEl.getDatum().index)) {
-                            linkEl.removeState(blurState);
-                            linkEl.addState(highlightState);
-                        }
-                        else {
-                            linkEl.removeState(highlightState);
-                            linkEl.addState(blurState);
-                        }
-                    });
-                }
-                if (this._nodeMark) {
-                    this._highLightElements(this._nodeMark.getProductElements(), highlightNodes, highlightState, blurState);
-                }
-            }
-            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 = linkEl.getDatum();
-                    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(blurState);
-                        linkEl.addState(highlightState, { ratio });
-                        return;
-                    }
-                    if (upSelectedLink) {
-                        if (!highlightNodes.includes(linkDatum.source)) {
-                            highlightNodes.push(linkDatum.source);
-                        }
-                        if (!highlightNodes.includes(linkDatum.target)) {
-                            highlightNodes.push(linkDatum.target);
-                        }
-                        linkEl.removeState(blurState);
-                        linkEl.addState(highlightState, { ratio: upSelectedLink.value / linkDatum.value });
-                        return;
-                    }
-                    linkEl.removeState(highlightState);
-                    linkEl.addState(blurState);
-                    return;
-                });
-                if (this._nodeMark) {
-                    this._highLightElements(this._nodeMark.getProductElements(), highlightNodes, highlightState, blurState);
-                }
-            }
-            this._needClear = true;
-        };
-        this._handleLinkRelatedClick = (element, highlightState, blurState) => {
-            var _a;
-            const allNodeElements = this._nodeMark.getProductElements();
-            if (!allNodeElements || !allNodeElements.length) {
-                return;
-            }
-            const allLinkElements = this._linkMark.getProductElements();
-            if (!allLinkElements || !allLinkElements.length) {
-                return;
-            }
-            const father = ((_a = element.getDatum()) === null || _a === void 0 ? void 0 : _a.parents) ? 'parents' : 'source';
-            if (father === 'source') {
-                const states = [highlightState, blurState];
-                if (this._linkMark) {
-                    allLinkElements.forEach(linkEl => {
-                        linkEl.removeState(states);
-                    });
-                }
-                if (this._nodeMark) {
-                    allNodeElements.forEach(el => {
-                        el.removeState(states);
-                    });
-                }
-            }
-            else {
-                const curLinkDatum = element.getDatum();
-                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 = linkEl.getDatum();
-                    const originalDatum = linkDatum.datum;
-                    if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) {
-                        linkEl.removeState(blurState);
-                        linkEl.addState(highlightState, { 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(blurState);
-                        linkEl.addState(highlightState, { 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(blurState);
-                        linkEl.addState(highlightState, { ratio: upSelectedLink.value / linkDatum.value });
-                        return;
-                    }
-                    linkEl.removeState(highlightState);
-                    linkEl.addState(blurState);
-                    return;
-                });
-                this._highLightElements(allNodeElements, highlightNodes, highlightState, blurState);
-            }
-            this._needClear = true;
-        };
     }
     get direction() {
         var _a, _b;
@@ -87293,6 +86998,315 @@ class SankeySeries extends CartesianSeries {
     linksSeriesDataUpdate() {
         this._linksSeriesData.updateData();
     }
+    _handleClearEmpty(highlightState, blurState) {
+        var _a, _b;
+        if (!this._needClear) {
+            return;
+        }
+        const allNodeElements = (_a = this._nodeMark) === null || _a === void 0 ? void 0 : _a.getProductElements();
+        if (!allNodeElements || !allNodeElements.length) {
+            return;
+        }
+        const allLinkElements = (_b = this._linkMark) === null || _b === void 0 ? void 0 : _b.getProductElements();
+        if (!allLinkElements || !allLinkElements.length) {
+            return;
+        }
+        const states = [highlightState, blurState];
+        allNodeElements.forEach(el => {
+            el.removeState(states);
+        });
+        allLinkElements.forEach(el => {
+            el.removeState(states);
+        });
+        this._needClear = false;
+    }
+    _handleNodeRelatedClick(element, highlightState, blurState) {
+        var _a;
+        const nodeDatum = element.getDatum();
+        const allNodeElements = this._nodeMark.getProductElements();
+        if (!allNodeElements || !allNodeElements.length) {
+            return;
+        }
+        const allLinkElements = this._linkMark.getProductElements();
+        if (!allLinkElements || !allLinkElements.length) {
+            return;
+        }
+        const father = ((_a = allLinkElements[0].getDatum()) === 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 = linkEl.getDatum();
+                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.getProductElements();
+                if (!allLinkElements || !allLinkElements.length) {
+                    return;
+                }
+                allLinkElements.forEach((linkEl, i) => {
+                    var _a;
+                    if (highlightLinks.includes((_a = linkEl.getDatum().key) !== null && _a !== void 0 ? _a : linkEl.getDatum().index)) {
+                        linkEl.removeState(blurState);
+                        linkEl.addState(highlightState);
+                    }
+                    else {
+                        linkEl.removeState(highlightState);
+                        linkEl.addState(blurState);
+                    }
+                });
+            }
+            if (this._nodeMark) {
+                this._highLightElements(this._nodeMark.getProductElements(), highlightNodes, highlightState, blurState);
+            }
+        }
+        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 = linkEl.getDatum();
+                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(blurState);
+                    linkEl.addState(highlightState, { ratio });
+                    return;
+                }
+                if (upSelectedLink) {
+                    if (!highlightNodes.includes(linkDatum.source)) {
+                        highlightNodes.push(linkDatum.source);
+                    }
+                    if (!highlightNodes.includes(linkDatum.target)) {
+                        highlightNodes.push(linkDatum.target);
+                    }
+                    linkEl.removeState(blurState);
+                    linkEl.addState(highlightState, { ratio: upSelectedLink.value / linkDatum.value });
+                    return;
+                }
+                linkEl.removeState(highlightState);
+                linkEl.addState(blurState);
+                return;
+            });
+            if (this._nodeMark) {
+                this._highLightElements(this._nodeMark.getProductElements(), highlightNodes, highlightState, blurState);
+            }
+        }
+        this._needClear = true;
+    }
+    _handleLinkRelatedClick(element, highlightState, blurState) {
+        var _a;
+        const allNodeElements = this._nodeMark.getProductElements();
+        if (!allNodeElements || !allNodeElements.length) {
+            return;
+        }
+        const allLinkElements = this._linkMark.getProductElements();
+        if (!allLinkElements || !allLinkElements.length) {
+            return;
+        }
+        const father = ((_a = element.getDatum()) === null || _a === void 0 ? void 0 : _a.parents) ? 'parents' : 'source';
+        if (father === 'source') {
+            const states = [highlightState, blurState];
+            if (this._linkMark) {
+                allLinkElements.forEach(linkEl => {
+                    linkEl.removeState(states);
+                });
+            }
+            if (this._nodeMark) {
+                allNodeElements.forEach(el => {
+                    el.removeState(states);
+                });
+            }
+        }
+        else {
+            const curLinkDatum = element.getDatum();
+            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 = linkEl.getDatum();
+                const originalDatum = linkDatum.datum;
+                if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) {
+                    linkEl.removeState(blurState);
+                    linkEl.addState(highlightState, { 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(blurState);
+                    linkEl.addState(highlightState, { 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(blurState);
+                    linkEl.addState(highlightState, { ratio: upSelectedLink.value / linkDatum.value });
+                    return;
+                }
+                linkEl.removeState(highlightState);
+                linkEl.addState(blurState);
+                return;
+            });
+            this._highLightElements(allNodeElements, highlightNodes, highlightState, blurState);
+        }
+        this._needClear = true;
+    }
     _highLightElements(vGrammarElements, highlightNodes, highlightState, blurState) {
         if (!vGrammarElements || !vGrammarElements.length) {
             return;
@@ -104649,4 +104663,4 @@ const registerMediaQuery = () => {
     registerChartPlugin(MediaQuery);
 };
 
-export { Arc3dMark, ArcMark, AreaChart, AreaMark, AreaSeries, AxisSyncPlugin, Bar3dChart, Bar3dSeries, BarChart, BarSeries, BaseChart, BaseChartSpecTransformer, BaseMark, BaseSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, ComponentMark, ComposedEventMapper, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, DiscreteLegend, DomTooltipHandler, DotSeries, Event$1 as Event, Factory$1 as Factory, FormatterPlugin, Funnel3dChart, Funnel3dSeries, FunnelChart, FunnelSeries, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, Histogram3dChart, HistogramChart, ImageMark, Indicator, Label, Layout$1 as Layout, Layout3d, LineChart, LineMark, LineSeries, LinearProgressChart, LinearProgressSeries, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, ManualTicker, MapChart, MapLabelComponent, MapSeries, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PictogramChart, PictogramSeries, Pie3dChart, Pie3dSeries, PieChart, PieSeries, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, ProgressLikeSeries, Pyramid3dMark, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumn3dChart, RangeColumn3dSeries, RangeColumnChart, RangeColumnSeries, Rect3dMark, 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, STATE_VALUE_ENUM_REVERSE, SankeyChart, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, StreamLight, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager$1 as ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TreemapChart, TreemapSeries, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloud3dChart, WordCloud3dSeries, WordCloudChart, WordCloudSeries, alternatingWave, builtinThemes, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createSymbol, createText, darkTheme$1 as darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, functionTransform, getActualColor, getCartesianDimensionInfo, getColorSchemeBySeries, getDataScheme, getFieldAlias, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getTheme, hasThemeMerged, isColorKey, isProgressiveDataColorScheme, isTokenKey, lightTheme, mergeFields, particleEffect, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, register3DPlugin, registerAllEnv, registerAllMarks, registerAnimate, registerArc3dMark, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBar3dChart, registerBar3dSeries, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomMark, registerDataZoom, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerFormatPlugin, registerFunnel3dChart, registerFunnel3dSeries, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGridLayout, registerGroupMark, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogram3dChart, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLayout3d, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapLabel, registerMapSeries, registerMarkArea, registerMarkLine, registerMarkPoint, registerMediaQuery, registerMorph, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPictogramChart, registerPictogramSeries, registerPie3dChart, registerPie3dSeries, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonMark, registerPoptip, registerPyramid3dMark, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumn3dChart, registerRangeColumn3dSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRect3dMark, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloud3dChart, registerWordCloud3dSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, snakeWave, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, version, vglobal };
+export { Arc3dMark, ArcMark, AreaChart, AreaMark, AreaSeries, AttributeLevel, AxisSyncPlugin, Bar3dChart, Bar3dSeries, BarChart, BarSeries, BaseChart, BaseChartSpecTransformer, BaseMark, BaseSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, ComponentMark, ComposedEventMapper, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, DiscreteLegend, DomTooltipHandler, DotSeries, Event$1 as Event, Factory$1 as Factory, FormatterPlugin, Funnel3dChart, Funnel3dSeries, FunnelChart, FunnelSeries, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, Histogram3dChart, HistogramChart, ImageMark, Indicator, Label, Layout$1 as Layout, Layout3d, LineChart, LineMark, LineSeries, LinearProgressChart, LinearProgressSeries, LinkPathMark, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, ManualTicker, MapChart, MapLabelComponent, MapSeries, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PictogramChart, PictogramSeries, Pie3dChart, Pie3dSeries, PieChart, PieSeries, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, ProgressLikeSeries, Pyramid3dMark, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumn3dChart, RangeColumn3dSeries, RangeColumnChart, RangeColumnSeries, Rect3dMark, 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, STATE_VALUE_ENUM_REVERSE, SankeyChart, SankeyChartSpecTransformer, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, StreamLight, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager$1 as ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TreemapChart, TreemapSeries, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloud3dChart, WordCloud3dSeries, WordCloudChart, WordCloudSeries, alternatingWave, builtinThemes, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createSymbol, createText, darkTheme$1 as darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, functionTransform, getActualColor, getCartesianDimensionInfo, getColorSchemeBySeries, getDataScheme, getFieldAlias, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getTheme, hasThemeMerged, isColorKey, isProgressiveDataColorScheme, isTokenKey, lightTheme, mergeFields, particleEffect, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, register3DPlugin, registerAllEnv, registerAllMarks, registerAnimate, registerArc3dMark, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBar3dChart, registerBar3dSeries, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomMark, registerDataSetInstanceParser, registerDataSetInstanceTransform, registerDataZoom, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerFormatPlugin, registerFunnel3dChart, registerFunnel3dSeries, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGridLayout, registerGroupMark, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogram3dChart, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLayout3d, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkPathMark, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapLabel, registerMapSeries, registerMarkArea, registerMarkLine, registerMarkPoint, registerMediaQuery, registerMorph, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPictogramChart, registerPictogramSeries, registerPie3dChart, registerPie3dSeries, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonMark, registerPoptip, registerPyramid3dMark, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumn3dChart, registerRangeColumn3dSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRect3dMark, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloud3dChart, registerWordCloud3dSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, snakeWave, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, version, vglobal };