@visactor/vchart 2.0.2 → 2.0.3-alpha.1

package/cjs/series/sankey/sankey.js

@@ -34,200 +34,6 @@ class SankeySeries extends cartesian_1.CartesianSeries {
             var _a;
             const emphasisSpec = null !== (_a = this._spec.emphasis) && void 0 !== _a ? _a : {}, graphic = params.item;
             "adjacency" === emphasisSpec.effect ? graphic && params.mark === this._nodeMark ? this._handleNodeAdjacencyClick(graphic) : graphic && params.mark === this._linkMark ? this._handleLinkAdjacencyClick(graphic) : this._handleClearEmpty() : "related" === emphasisSpec.effect && (graphic && params.mark === this._nodeMark ? this._handleNodeRelatedClick(graphic) : graphic && params.mark === this._linkMark ? this._handleLinkRelatedClick(graphic) : this._handleClearEmpty());
-        }, this._handleClearEmpty = () => {
-            var _a, _b;
-            if (!this._needClear) return;
-            const allNodeElements = null === (_a = this._nodeMark) || void 0 === _a ? void 0 : _a.getGraphics();
-            if (!allNodeElements || !allNodeElements.length) return;
-            const allLinkElements = null === (_b = this._linkMark) || void 0 === _b ? void 0 : _b.getGraphics();
-            allLinkElements && allLinkElements.length && (allNodeElements.forEach((el => {
-                el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-            })), allLinkElements.forEach((el => {
-                el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-            })), this._needClear = !1);
-        }, this._handleNodeAdjacencyClick = graphic => {
-            const nodeDatum = (0, util_2.getDatumOfGraphic)(graphic), highlightNodes = [ nodeDatum.key ];
-            if (this._linkMark) {
-                const allLinkElements = this._linkMark.getGraphics();
-                if (!allLinkElements || !allLinkElements.length) return;
-                allLinkElements.forEach(((linkEl, i) => {
-                    const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl);
-                    linkDatum.source === nodeDatum.key ? (highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
-                    linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                    linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : linkDatum.target === nodeDatum.key ? (highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
-                    linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                    linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
-                    linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
-                }));
-            }
-            this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes), 
-            this._needClear = !0;
-        }, this._handleLinkAdjacencyClick = graphic => {
-            const curLinkDatum = (0, util_2.getDatumOfGraphic)(graphic), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ];
-            if (this._linkMark) {
-                const allLinkElements = this._linkMark.getGraphics();
-                if (!allLinkElements || !allLinkElements.length) return;
-                allLinkElements.forEach((linkEl => {
-                    linkEl === graphic ? (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                    (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
-                        ratio: 1
-                    })) : (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
-                }));
-            }
-            this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes), 
-            this._needClear = !0;
-        }, this._handleNodeRelatedClick = graphic => {
-            var _a;
-            const nodeDatum = (0, util_2.getDatumOfGraphic)(graphic), allNodeElements = this._nodeMark.getGraphics();
-            if (!allNodeElements || !allNodeElements.length) return;
-            const allLinkElements = this._linkMark.getGraphics();
-            if (!allLinkElements || !allLinkElements.length) return;
-            const father = (null === (_a = (0, util_2.getDatumOfGraphic)(allLinkElements[0])) || void 0 === _a ? void 0 : _a.parents) ? "parents" : "source";
-            if ("source" === father) {
-                const highlightNodes = [ nodeDatum.key ], highlightLinks = [];
-                if (allLinkElements.forEach(((linkEl, i) => {
-                    var _a, _b, _c, _d;
-                    const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source";
-                    if ((0, vutils_1.array)(linkDatum[father]).includes(nodeDatum.key)) {
-                        if (highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) || highlightLinks.push(null !== (_b = linkDatum.key) && void 0 !== _b ? _b : linkDatum.index), 
-                        highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
-                        !highlightNodes.includes(linkDatum.target)) {
-                            highlightNodes.push(linkDatum.target);
-                            let targetNodeSourceLinks = allNodeElements.find((nodeElement => nodeElement.data[0].key === linkDatum.target)).data[0].sourceLinks;
-                            for (;(null == targetNodeSourceLinks ? void 0 : targetNodeSourceLinks.length) > 0; ) {
-                                const newTargetNodeSourceLinks = [];
-                                return targetNodeSourceLinks.forEach((targetNodeSourceLinkDatum => {
-                                    var _a, _b;
-                                    if (!highlightLinks.includes(null !== (_a = targetNodeSourceLinkDatum.key) && void 0 !== _a ? _a : targetNodeSourceLinkDatum.index) && (highlightLinks.push(null !== (_b = targetNodeSourceLinkDatum.key) && void 0 !== _b ? _b : targetNodeSourceLinkDatum.index), 
-                                    !highlightNodes.includes(targetNodeSourceLinkDatum.target))) {
-                                        highlightNodes.push(targetNodeSourceLinkDatum.target);
-                                        const sourceNodeTemp = allNodeElements.find((nodeElement => nodeElement.data[0].key === targetNodeSourceLinkDatum.target));
-                                        newTargetNodeSourceLinks.push(sourceNodeTemp.data[0].targetLinks);
-                                    }
-                                })), void (targetNodeSourceLinks = newTargetNodeSourceLinks);
-                            }
-                        }
-                    } else if (linkDatum.target === nodeDatum.key && (highlightLinks.includes(null !== (_c = linkDatum.key) && void 0 !== _c ? _c : linkDatum.index) || highlightLinks.push(null !== (_d = linkDatum.key) && void 0 !== _d ? _d : linkDatum.index), 
-                    !highlightNodes.includes(linkDatum.source))) {
-                        highlightNodes.push(linkDatum.source);
-                        let sourceNodeTargetLinks = allNodeElements.find((nodeElement => nodeElement.data[0].key === linkDatum.source)).data[0].targetLinks;
-                        for (;(null == sourceNodeTargetLinks ? void 0 : sourceNodeTargetLinks.length) > 0; ) {
-                            const newSourceNodeTargetLinks = [];
-                            return sourceNodeTargetLinks.forEach((sourceNodeTargetLinkDatum => {
-                                var _a, _b;
-                                if (!highlightLinks.includes(null !== (_a = sourceNodeTargetLinkDatum.key) && void 0 !== _a ? _a : sourceNodeTargetLinkDatum.index) && (highlightLinks.push(null !== (_b = sourceNodeTargetLinkDatum.key) && void 0 !== _b ? _b : sourceNodeTargetLinkDatum.index), 
-                                !highlightNodes.includes(sourceNodeTargetLinkDatum.source))) {
-                                    highlightNodes.push(sourceNodeTargetLinkDatum.source);
-                                    const sourceNodeTemp = allNodeElements.find((nodeElement => nodeElement.data[0].key === sourceNodeTargetLinkDatum.source));
-                                    newSourceNodeTargetLinks.push(sourceNodeTemp.data[0].targetLinks);
-                                }
-                            })), void (sourceNodeTargetLinks = newSourceNodeTargetLinks);
-                        }
-                    }
-                })), this._linkMark) {
-                    const allLinkElements = this._linkMark.getGraphics();
-                    if (!allLinkElements || !allLinkElements.length) return;
-                    allLinkElements.forEach(((linkEl, i) => {
-                        var _a;
-                        const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl);
-                        highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) ? (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                        linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
-                        linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
-                    }));
-                }
-                this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
-            } else {
-                const highlightNodes = [ nodeDatum.key ], upstreamLinks = nodeDatum.targetLinks.reduce(((res, link) => ((0, 
-                vutils_1.array)(link.datum).forEach((dividedLink => {
-                    const parents = dividedLink.parents, len = parents.length;
-                    for (let i = 0; i < len; i++) {
-                        const source = parents[i].key, target = parents[i + 1] ? parents[i + 1].key : nodeDatum.key, value = dividedLink.value, existingItem = res.find((item => item.source === source && item.target === target));
-                        existingItem ? existingItem.value += value : res.push({
-                            source: source,
-                            target: target,
-                            value: value
-                        });
-                    }
-                })), res)), []);
-                allLinkElements.forEach(((linkEl, i) => {
-                    const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl), originalDatum = linkDatum.datum, selectedDatum = originalDatum ? originalDatum.filter((entry => entry[father].some((par => par.key === nodeDatum.key)))) : null, upSelectedLink = upstreamLinks.find((upLink => upLink.source === linkDatum.source && upLink.target === linkDatum.target));
-                    if (selectedDatum && selectedDatum.length) {
-                        highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
-                        highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target);
-                        const ratio = selectedDatum.reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
-                        return linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                        void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
-                            ratio: ratio
-                        });
-                    }
-                    if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
-                    highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
-                    linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                    void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
-                        ratio: upSelectedLink.value / linkDatum.value
-                    });
-                    linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
-                })), this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
-            }
-            this._needClear = !0;
-        }, this._handleLinkRelatedClick = graphic => {
-            const allNodeElements = this._nodeMark.getGraphics();
-            if (!allNodeElements || !allNodeElements.length) return;
-            const allLinkElements = this._linkMark.getGraphics();
-            if (!allLinkElements || !allLinkElements.length) return;
-            if ("source" === ((0, util_2.getDatumOfGraphic)(graphic) ? "parents" : "source")) this._linkMark && allLinkElements.forEach((linkEl => {
-                linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-            })), this._nodeMark && allNodeElements.forEach((el => {
-                el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
-            })); else {
-                const curLinkDatum = (0, util_2.getDatumOfGraphic)(graphic), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ], upstreamLinks = [];
-                (0, vutils_1.array)(curLinkDatum.datum).forEach((dividedLink => {
-                    const parents = dividedLink.parents, len = parents.length;
-                    for (let i = 0; i < len - 1; i++) {
-                        const source = parents[i].key, target = parents[i + 1].key, value = dividedLink.value, existingItem = upstreamLinks.find((item => item.source === source && item.target === target));
-                        upstreamLinks.push({
-                            source: parents[i].key,
-                            target: parents[i + 1].key,
-                            value: dividedLink.value
-                        }), existingItem ? existingItem.value += value : upstreamLinks.push({
-                            source: source,
-                            target: target,
-                            value: value
-                        });
-                    }
-                })), allLinkElements.forEach((linkEl => {
-                    const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl), originalDatum = linkDatum.datum;
-                    if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) return linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                    void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
-                        ratio: 1
-                    });
-                    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) {
-                        highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
-                        highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target);
-                        const ratio = selectedDatum.filter((entry => entry.parents.some(((par, index) => {
-                            var _a;
-                            return par.key === curLinkDatum.source && (null === (_a = entry.parents[index + 1]) || void 0 === _a ? void 0 : _a.key) === curLinkDatum.target;
-                        })))).reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
-                        return linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                        void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
-                            ratio: ratio
-                        });
-                    }
-                    const upSelectedLink = upstreamLinks.find((upLink => upLink.source === linkDatum.source && upLink.target === linkDatum.target));
-                    if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
-                    highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
-                    linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                    void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
-                        ratio: upSelectedLink.value / linkDatum.value
-                    });
-                    linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
-                })), this._highLightElements(allNodeElements, highlightNodes);
-            }
-            this._needClear = !0;
         };
     }
     get direction() {
@@ -474,6 +280,205 @@ class SankeySeries extends cartesian_1.CartesianSeries {
     linksSeriesDataUpdate() {
         this._linkMark.getData().updateData();
     }
+    _handleClearEmpty() {
+        var _a, _b;
+        if (!this._needClear) return;
+        const allNodeElements = null === (_a = this._nodeMark) || void 0 === _a ? void 0 : _a.getGraphics();
+        if (!allNodeElements || !allNodeElements.length) return;
+        const allLinkElements = null === (_b = this._linkMark) || void 0 === _b ? void 0 : _b.getGraphics();
+        allLinkElements && allLinkElements.length && (allNodeElements.forEach((el => {
+            el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+        })), allLinkElements.forEach((el => {
+            el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+        })), this._needClear = !1);
+    }
+    _handleNodeAdjacencyClick(graphic) {
+        const nodeDatum = (0, util_2.getDatumOfGraphic)(graphic), highlightNodes = [ nodeDatum.key ];
+        if (this._linkMark) {
+            const allLinkElements = this._linkMark.getGraphics();
+            if (!allLinkElements || !allLinkElements.length) return;
+            allLinkElements.forEach(((linkEl, i) => {
+                const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl);
+                linkDatum.source === nodeDatum.key ? (highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
+                linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : linkDatum.target === nodeDatum.key ? (highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
+                linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
+            }));
+        }
+        this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes), 
+        this._needClear = !0;
+    }
+    _handleLinkAdjacencyClick(graphic) {
+        const curLinkDatum = (0, util_2.getDatumOfGraphic)(graphic), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ];
+        if (this._linkMark) {
+            const allLinkElements = this._linkMark.getGraphics();
+            if (!allLinkElements || !allLinkElements.length) return;
+            allLinkElements.forEach((linkEl => {
+                linkEl === graphic ? (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                    ratio: 1
+                })) : (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
+            }));
+        }
+        this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes), 
+        this._needClear = !0;
+    }
+    _handleNodeRelatedClick(graphic) {
+        var _a;
+        const nodeDatum = (0, util_2.getDatumOfGraphic)(graphic), allNodeElements = this._nodeMark.getGraphics();
+        if (!allNodeElements || !allNodeElements.length) return;
+        const allLinkElements = this._linkMark.getGraphics();
+        if (!allLinkElements || !allLinkElements.length) return;
+        const father = (null === (_a = (0, util_2.getDatumOfGraphic)(allLinkElements[0])) || void 0 === _a ? void 0 : _a.parents) ? "parents" : "source";
+        if ("source" === father) {
+            const highlightNodes = [ nodeDatum.key ], highlightLinks = [];
+            if (allLinkElements.forEach(((linkEl, i) => {
+                var _a, _b, _c, _d;
+                const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source";
+                if ((0, vutils_1.array)(linkDatum[father]).includes(nodeDatum.key)) {
+                    if (highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) || highlightLinks.push(null !== (_b = linkDatum.key) && void 0 !== _b ? _b : linkDatum.index), 
+                    highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
+                    !highlightNodes.includes(linkDatum.target)) {
+                        highlightNodes.push(linkDatum.target);
+                        let targetNodeSourceLinks = allNodeElements.find((nodeElement => nodeElement.data[0].key === linkDatum.target)).data[0].sourceLinks;
+                        for (;(null == targetNodeSourceLinks ? void 0 : targetNodeSourceLinks.length) > 0; ) {
+                            const newTargetNodeSourceLinks = [];
+                            return targetNodeSourceLinks.forEach((targetNodeSourceLinkDatum => {
+                                var _a, _b;
+                                if (!highlightLinks.includes(null !== (_a = targetNodeSourceLinkDatum.key) && void 0 !== _a ? _a : targetNodeSourceLinkDatum.index) && (highlightLinks.push(null !== (_b = targetNodeSourceLinkDatum.key) && void 0 !== _b ? _b : targetNodeSourceLinkDatum.index), 
+                                !highlightNodes.includes(targetNodeSourceLinkDatum.target))) {
+                                    highlightNodes.push(targetNodeSourceLinkDatum.target);
+                                    const sourceNodeTemp = allNodeElements.find((nodeElement => nodeElement.data[0].key === targetNodeSourceLinkDatum.target));
+                                    newTargetNodeSourceLinks.push(sourceNodeTemp.data[0].targetLinks);
+                                }
+                            })), void (targetNodeSourceLinks = newTargetNodeSourceLinks);
+                        }
+                    }
+                } else if (linkDatum.target === nodeDatum.key && (highlightLinks.includes(null !== (_c = linkDatum.key) && void 0 !== _c ? _c : linkDatum.index) || highlightLinks.push(null !== (_d = linkDatum.key) && void 0 !== _d ? _d : linkDatum.index), 
+                !highlightNodes.includes(linkDatum.source))) {
+                    highlightNodes.push(linkDatum.source);
+                    let sourceNodeTargetLinks = allNodeElements.find((nodeElement => nodeElement.data[0].key === linkDatum.source)).data[0].targetLinks;
+                    for (;(null == sourceNodeTargetLinks ? void 0 : sourceNodeTargetLinks.length) > 0; ) {
+                        const newSourceNodeTargetLinks = [];
+                        return sourceNodeTargetLinks.forEach((sourceNodeTargetLinkDatum => {
+                            var _a, _b;
+                            if (!highlightLinks.includes(null !== (_a = sourceNodeTargetLinkDatum.key) && void 0 !== _a ? _a : sourceNodeTargetLinkDatum.index) && (highlightLinks.push(null !== (_b = sourceNodeTargetLinkDatum.key) && void 0 !== _b ? _b : sourceNodeTargetLinkDatum.index), 
+                            !highlightNodes.includes(sourceNodeTargetLinkDatum.source))) {
+                                highlightNodes.push(sourceNodeTargetLinkDatum.source);
+                                const sourceNodeTemp = allNodeElements.find((nodeElement => nodeElement.data[0].key === sourceNodeTargetLinkDatum.source));
+                                newSourceNodeTargetLinks.push(sourceNodeTemp.data[0].targetLinks);
+                            }
+                        })), void (sourceNodeTargetLinks = newSourceNodeTargetLinks);
+                    }
+                }
+            })), this._linkMark) {
+                const allLinkElements = this._linkMark.getGraphics();
+                if (!allLinkElements || !allLinkElements.length) return;
+                allLinkElements.forEach(((linkEl, i) => {
+                    var _a;
+                    const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl);
+                    highlightLinks.includes(null !== (_a = linkDatum.key) && void 0 !== _a ? _a : linkDatum.index) ? (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                    linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0)) : (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+                    linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0));
+                }));
+            }
+            this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
+        } else {
+            const highlightNodes = [ nodeDatum.key ], upstreamLinks = nodeDatum.targetLinks.reduce(((res, link) => ((0, 
+            vutils_1.array)(link.datum).forEach((dividedLink => {
+                const parents = dividedLink.parents, len = parents.length;
+                for (let i = 0; i < len; i++) {
+                    const source = parents[i].key, target = parents[i + 1] ? parents[i + 1].key : nodeDatum.key, value = dividedLink.value, existingItem = res.find((item => item.source === source && item.target === target));
+                    existingItem ? existingItem.value += value : res.push({
+                        source: source,
+                        target: target,
+                        value: value
+                    });
+                }
+            })), res)), []);
+            allLinkElements.forEach(((linkEl, i) => {
+                const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl), originalDatum = linkDatum.datum, selectedDatum = originalDatum ? originalDatum.filter((entry => entry[father].some((par => par.key === nodeDatum.key)))) : null, upSelectedLink = upstreamLinks.find((upLink => upLink.source === linkDatum.source && upLink.target === linkDatum.target));
+                if (selectedDatum && selectedDatum.length) {
+                    highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
+                    highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target);
+                    const ratio = selectedDatum.reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
+                    return linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                    void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                        ratio: ratio
+                    });
+                }
+                if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
+                highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
+                linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                    ratio: upSelectedLink.value / linkDatum.value
+                });
+                linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
+            })), this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes);
+        }
+        this._needClear = !0;
+    }
+    _handleLinkRelatedClick(graphic) {
+        const allNodeElements = this._nodeMark.getGraphics();
+        if (!allNodeElements || !allNodeElements.length) return;
+        const allLinkElements = this._linkMark.getGraphics();
+        if (!allLinkElements || !allLinkElements.length) return;
+        if ("source" === ((0, util_2.getDatumOfGraphic)(graphic) ? "parents" : "source")) this._linkMark && allLinkElements.forEach((linkEl => {
+            linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+        })), this._nodeMark && allNodeElements.forEach((el => {
+            el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), el.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+        })); else {
+            const curLinkDatum = (0, util_2.getDatumOfGraphic)(graphic), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ], upstreamLinks = [];
+            (0, vutils_1.array)(curLinkDatum.datum).forEach((dividedLink => {
+                const parents = dividedLink.parents, len = parents.length;
+                for (let i = 0; i < len - 1; i++) {
+                    const source = parents[i].key, target = parents[i + 1].key, value = dividedLink.value, existingItem = upstreamLinks.find((item => item.source === source && item.target === target));
+                    upstreamLinks.push({
+                        source: parents[i].key,
+                        target: parents[i + 1].key,
+                        value: dividedLink.value
+                    }), existingItem ? existingItem.value += value : upstreamLinks.push({
+                        source: source,
+                        target: target,
+                        value: value
+                    });
+                }
+            })), allLinkElements.forEach((linkEl => {
+                const linkDatum = (0, util_2.getDatumOfGraphic)(linkEl), originalDatum = linkDatum.datum;
+                if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) return linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                    ratio: 1
+                });
+                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) {
+                    highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
+                    highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target);
+                    const ratio = selectedDatum.filter((entry => entry.parents.some(((par, index) => {
+                        var _a;
+                        return par.key === curLinkDatum.source && (null === (_a = entry.parents[index + 1]) || void 0 === _a ? void 0 : _a.key) === curLinkDatum.target;
+                    })))).reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
+                    return linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                    void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                        ratio: ratio
+                    });
+                }
+                const upSelectedLink = upstreamLinks.find((upLink => upLink.source === linkDatum.source && upLink.target === linkDatum.target));
+                if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
+                highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
+                linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
+                void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                    ratio: upSelectedLink.value / linkDatum.value
+                });
+                linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
+            })), this._highLightElements(allNodeElements, highlightNodes);
+        }
+        this._needClear = !0;
+    }
     _highLightElements(graphics, highlightNodes) {
         graphics && graphics.length && graphics.forEach((g => {
             g.removeState([ interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS ]),