@visactor/vchart 1.3.0-beta.8 → 1.3.0

package/cjs/series/sankey/sankey.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.SankeySeries = void 0;
 
-const cartesian_1 = require("../cartesian/cartesian"), interface_1 = require("../interface"), vgrammar_sankey_1 = require("@visactor/vgrammar-sankey"), utils_1 = require("../../animation/utils"), config_1 = require("../../animation/config"), register_1 = require("../../data/register"), sankey_1 = require("../../data/transforms/sankey"), sankey_nodes_1 = require("../../data/transforms/sankey-nodes"), sankey_links_1 = require("../../data/transforms/sankey-links"), mark_1 = require("../../compile/mark"), vdataset_1 = require("@visactor/vdataset"), constant_1 = require("../../constant"), series_data_1 = require("../base/series-data"), add_property_1 = require("../../data/transforms/add-property"), data_key_1 = require("../../data/transforms/data-key"), util_1 = require("../../theme/color-scheme/util"), tooltip_helper_1 = require("./tooltip-helper"), vutils_1 = require("@visactor/vutils"), util_2 = require("../../util"), color_ordinal_scale_1 = require("../../scale/color-ordinal-scale"), vchart_1 = require("../../core/vchart"), rect_1 = require("../../mark/rect"), text_1 = require("../../mark/text"), link_path_1 = require("../../mark/link-path"), constant_2 = require("./constant");
+const cartesian_1 = require("../cartesian/cartesian"), interface_1 = require("../interface"), vgrammar_sankey_1 = require("@visactor/vgrammar-sankey"), utils_1 = require("../../animation/utils"), config_1 = require("../../animation/config"), register_1 = require("../../data/register"), sankey_1 = require("../../data/transforms/sankey"), sankey_nodes_1 = require("../../data/transforms/sankey-nodes"), sankey_links_1 = require("../../data/transforms/sankey-links"), mark_1 = require("../../compile/mark"), vdataset_1 = require("@visactor/vdataset"), constant_1 = require("../../constant"), series_data_1 = require("../base/series-data"), add_property_1 = require("../../data/transforms/add-property"), data_key_1 = require("../../data/transforms/data-key"), util_1 = require("../../theme/color-scheme/util"), tooltip_helper_1 = require("./tooltip-helper"), vutils_1 = require("@visactor/vutils"), util_2 = require("../../util"), color_ordinal_scale_1 = require("../../scale/color-ordinal-scale"), vchart_1 = require("../../core/vchart"), rect_1 = require("../../mark/rect"), text_1 = require("../../mark/text"), link_path_1 = require("../../mark/link-path"), constant_2 = require("./constant"), flatten_1 = require("../../data/transforms/flatten");
 
 vchart_1.VChart.useMark([ rect_1.RectMark, link_path_1.LinkPathMark, text_1.TextMark ]), 
 (0, vgrammar_sankey_1.registerSankeyTransforms)();
@@ -15,10 +15,21 @@ class SankeySeries extends cartesian_1.CartesianSeries {
         this._labelLayoutZIndex = constant_1.LayoutZIndex.Label, this._viewBox = new vutils_1.Bounds, 
         this._handleAdjacencyClick = params => {
             const element = params.item;
-            element && element.mark.id().includes("node") ? this._handleNodeAdjacencyClick(element) : element && element.mark.id().includes("link") && this._handleLinkAdjacencyClick(element);
+            element && element.mark.id().includes("node") ? this._handleNodeAdjacencyClick(element) : element && element.mark.id().includes("link") ? this._handleLinkAdjacencyClick(element) : this._handleClearEmpty();
         }, this._handleRelatedClick = params => {
             const element = params.item;
-            element && element.mark.id().includes("node") ? this._handleNodeRelatedClick(element) : element && element.mark.id().includes("link") && this._handleLinkRelatedClick(element);
+            element && element.mark.id().includes("node") ? this._handleNodeRelatedClick(element) : element && element.mark.id().includes("link") ? this._handleLinkRelatedClick(element) : this._handleClearEmpty();
+        }, this._handleClearEmpty = () => {
+            const nodeVGrammarMark = this._nodeMark.getProduct();
+            if (!nodeVGrammarMark || !nodeVGrammarMark.elements || !nodeVGrammarMark.elements.length) return;
+            const allNodeElements = nodeVGrammarMark.elements, linkVGrammarMark = this._linkMark.getProduct();
+            if (!linkVGrammarMark || !linkVGrammarMark.elements || !linkVGrammarMark.elements.length) return;
+            const allLinkElements = linkVGrammarMark.elements;
+            allNodeElements.forEach((el => {
+                el.clearStates();
+            })), allLinkElements.forEach((el => {
+                el.clearStates();
+            }));
         }, this._handleNodeAdjacencyClick = element => {
             const nodeDatum = element.getDatum(), highlightNodes = [ nodeDatum.key ];
             [ this._linkMark ].forEach((mark => {
@@ -32,7 +43,8 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                         if (highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
                         highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
                         "parents" === father) {
-                            ratio = linkDatum.datum.filter((entry => entry.parents.some((par => par.key === nodeDatum.key)))).reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
+                            const originalDatum = linkDatum.datum;
+                            ratio = (originalDatum ? originalDatum.filter((entry => entry.parents.some((par => par.key === nodeDatum.key)))).reduce(((sum, d) => sum + d.value), 0) : 0) / linkDatum.value;
                         }
                         linkEl.addState("selected", {
                             ratio: ratio
@@ -66,10 +78,11 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                         if (highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
                         highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
                         "parents" === father) {
-                            ratio = linkDatum.datum.filter((entry => entry.parents.some(((par, index) => {
+                            const originalDatum = linkDatum.datum;
+                            ratio = (originalDatum ? originalDatum.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;
+                            })))).reduce(((sum, d) => sum + d.value), 0) : 0) / linkDatum.value;
                         }
                         linkEl.addState("selected", {
                             ratio: ratio
@@ -90,81 +103,126 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                 }));
             }));
         }, this._handleNodeRelatedClick = element => {
-            const nodeDatum = element.getDatum(), highlightNodes = [ nodeDatum.key ], highlightLinks = [], nodeVGrammarMark = this._nodeMark.getProduct();
+            var _a;
+            const nodeDatum = element.getDatum(), nodeVGrammarMark = this._nodeMark.getProduct();
             if (!nodeVGrammarMark || !nodeVGrammarMark.elements || !nodeVGrammarMark.elements.length) return;
             const allNodeElements = nodeVGrammarMark.elements, linkVGrammarMark = this._linkMark.getProduct();
             if (!linkVGrammarMark || !linkVGrammarMark.elements || !linkVGrammarMark.elements.length) return;
-            linkVGrammarMark.elements.forEach(((linkEl, i) => {
-                var _a, _b, _c, _d;
-                linkEl.clearStates();
-                const linkDatum = linkEl.getDatum(), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source";
-                if ((0, util_2.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 => {
+            const allLinkElements = linkVGrammarMark.elements;
+            if ("source" === ((null === (_a = allLinkElements[0].getDatum()) || void 0 === _a ? void 0 : _a.parents) ? "parents" : "source")) {
+                const highlightNodes = [ nodeDatum.key ], highlightLinks = [];
+                allLinkElements.forEach(((linkEl, i) => {
+                    var _a, _b, _c, _d;
+                    linkEl.clearStates();
+                    const linkDatum = linkEl.getDatum(), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source";
+                    if ((0, util_2.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 = 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);
+                                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 (targetNodeSourceLinks = newTargetNodeSourceLinks);
+                            })), void (sourceNodeTargetLinks = newSourceNodeTargetLinks);
                         }
                     }
-                } 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 ].forEach((mark => {
+                    const vGrammarMark = mark.getProduct();
+                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
+                    vGrammarMark.elements.forEach(((linkEl, i) => {
+                        var _a;
+                        linkEl.clearStates(), highlightLinks.includes(null !== (_a = linkEl.getDatum().key) && void 0 !== _a ? _a : linkEl.getDatum().index) ? linkEl.useStates([ "selected" ]) : linkEl.useStates([ "blur" ]);
+                    }));
+                })), [ this._nodeMark ].forEach((mark => {
+                    const vGrammarMark = mark.getProduct();
+                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
+                    vGrammarMark.elements.forEach((el => {
+                        el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
+                    }));
+                })), [ this._labelMark ].forEach((mark => {
+                    const vGrammarMark = mark.getProduct();
+                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
+                    vGrammarMark.elements.forEach((el => {
+                        el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
+                    }));
+                }));
+            } else {
+                const highlightNodes = [ nodeDatum.key ], upstreamLinks = nodeDatum.targetLinks.reduce(((res, link) => ((0, 
+                util_2.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
+                        });
                     }
-                }
-            })), [ this._linkMark ].forEach((mark => {
-                const vGrammarMark = mark.getProduct();
-                if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                vGrammarMark.elements.forEach(((linkEl, i) => {
-                    var _a;
-                    if (linkEl.clearStates(), highlightLinks.includes(null !== (_a = linkEl.getDatum().key) && void 0 !== _a ? _a : linkEl.getDatum().index)) {
-                        const linkDatum = linkEl.getDatum();
-                        let ratio;
-                        if ("parents" === ((null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source")) {
-                            ratio = linkDatum.datum.filter((entry => entry.parents.some((par => par.key === nodeDatum.key)))).reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
-                        }
-                        linkEl.addState("selected", {
+                })), res)), []);
+                allLinkElements.forEach(((linkEl, i) => {
+                    linkEl.clearStates();
+                    const linkDatum = linkEl.getDatum(), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source", 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.useStates([ "selected" ]), void linkEl.addState("selected", {
                             ratio: ratio
                         });
-                    } else linkEl.useStates([ "blur" ]);
-                }));
-            })), [ this._nodeMark ].forEach((mark => {
-                const vGrammarMark = mark.getProduct();
-                if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                vGrammarMark.elements.forEach((el => {
-                    el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
-                }));
-            })), [ this._labelMark ].forEach((mark => {
-                const vGrammarMark = mark.getProduct();
-                if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                vGrammarMark.elements.forEach((el => {
-                    el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
+                    }
+                    if (upSelectedLink) return highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
+                    highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target), 
+                    linkEl.useStates([ "selected" ]), void linkEl.addState("selected", {
+                        ratio: upSelectedLink.value / linkDatum.value
+                    });
+                    linkEl.useStates([ "blur" ]);
+                })), [ this._nodeMark ].forEach((mark => {
+                    const vGrammarMark = mark.getProduct();
+                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
+                    vGrammarMark.elements.forEach((el => {
+                        el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
+                    }));
+                })), [ this._labelMark ].forEach((mark => {
+                    const vGrammarMark = mark.getProduct();
+                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
+                    vGrammarMark.elements.forEach((el => {
+                        el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
+                    }));
                 }));
-            }));
+            }
         }, this._handleLinkRelatedClick = element => {
-            [ this._linkMark ].forEach((mark => {
+            var _a;
+            const nodeVGrammarMark = this._nodeMark.getProduct();
+            if (!nodeVGrammarMark || !nodeVGrammarMark.elements || !nodeVGrammarMark.elements.length) return;
+            const allNodeElements = nodeVGrammarMark.elements, linkVGrammarMark = this._linkMark.getProduct();
+            if (!linkVGrammarMark || !linkVGrammarMark.elements || !linkVGrammarMark.elements.length) return;
+            const allLinkElements = linkVGrammarMark.elements;
+            if ("source" === ((null === (_a = element.getDatum()) || void 0 === _a ? void 0 : _a.parents) ? "parents" : "source")) [ this._linkMark ].forEach((mark => {
                 const vGrammarMark = mark.getProduct();
                 if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
                 vGrammarMark.elements.forEach((linkEl => {
@@ -182,7 +240,61 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                 vGrammarMark.elements.forEach((el => {
                     el.clearStates();
                 }));
-            }));
+            })); else {
+                const curLinkDatum = element.getDatum(), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ], upstreamLinks = [];
+                (0, util_2.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 => {
+                    linkEl.clearStates();
+                    const linkDatum = linkEl.getDatum(), originalDatum = linkDatum.datum;
+                    if (linkDatum.source === curLinkDatum.source && linkDatum.target === curLinkDatum.target) return linkEl.useStates([ "selected" ]), 
+                    void linkEl.addState("selected", {
+                        ratio: 1
+                    });
+                    const selectedDatum = originalDatum ? originalDatum.filter(((entry, index) => entry.parents.some((par => {
+                        var _a;
+                        return par.key === curLinkDatum.target && (null === (_a = entry.parents[index - 1]) || void 0 === _a ? void 0 : _a.key) === curLinkDatum.source;
+                    })))) : null;
+                    if (selectedDatum && selectedDatum.length) {
+                        highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
+                        highlightNodes.includes(linkDatum.target) || highlightNodes.push(linkDatum.target);
+                        const val = 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), ratio = val / linkDatum.value;
+                        return linkEl.useStates([ "selected" ]), void linkEl.addState("selected", {
+                            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.useStates([ "selected" ]), void linkEl.addState("selected", {
+                        ratio: upSelectedLink.value / linkDatum.value
+                    });
+                    linkEl.useStates([ "blur" ]);
+                })), allNodeElements.forEach((el => {
+                    el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
+                })), [ this._labelMark ].forEach((mark => {
+                    const vGrammarMark = mark.getProduct();
+                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
+                    vGrammarMark.elements.forEach((el => {
+                        el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
+                    }));
+                }));
+            }
         };
     }
     getCategoryField() {
@@ -204,7 +316,7 @@ class SankeySeries extends cartesian_1.CartesianSeries {
         this._labelLimit = null !== (_c = null === (_b = this._spec.label) || void 0 === _b ? void 0 : _b.limit) && void 0 !== _c ? _c : 100;
     }
     initData() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (super.initData(), this._viewDataFilter) {
             (0, register_1.registerDataSetInstanceTransform)(this._dataSet, "sankey", sankey_1.sankey), 
             this.addViewDataFilter({
@@ -236,19 +348,32 @@ class SankeySeries extends cartesian_1.CartesianSeries {
             const nodesDataSet = new vdataset_1.DataSet;
             (0, register_1.registerDataSetInstanceParser)(nodesDataSet, "dataview", vdataset_1.dataViewParser), 
             (0, register_1.registerDataSetInstanceTransform)(nodesDataSet, "sankeyNodes", sankey_nodes_1.sankeyNodes), 
-            (0, register_1.registerDataSetInstanceTransform)(nodesDataSet, "addVChartProperty", add_property_1.addVChartProperty);
+            (0, register_1.registerDataSetInstanceTransform)(nodesDataSet, "addVChartProperty", add_property_1.addVChartProperty), 
+            (0, register_1.registerDataSetInstanceTransform)(nodesDataSet, "flatten", flatten_1.flatten);
             const nodesDataView = new vdataset_1.DataView(nodesDataSet);
             nodesDataView.parse([ this.getViewData() ], {
                 type: "dataview"
             }), nodesDataView.transform({
                 type: "sankeyNodes"
+            }), nodesDataView.transform({
+                type: "flatten",
+                options: {
+                    callback: node => {
+                        if (node.datum) {
+                            const nodeData = node.datum[node.depth];
+                            return Object.assign(Object.assign({}, node), nodeData);
+                        }
+                        return node;
+                    }
+                }
             }), nodesDataView.transform({
                 type: "addVChartProperty",
                 options: {
                     beforeCall: data_key_1.initKeyMap,
                     call: data_key_1.addDataKey.bind(this)
                 }
-            }, !1), this._nodesSeriesData = new series_data_1.SeriesData(this._option, nodesDataView);
+            }, !1), null === (_e = this._data) || void 0 === _e || _e.getDataView().target.addListener("change", nodesDataView.reRunAllTransform), 
+            this._nodesSeriesData = new series_data_1.SeriesData(this._option, nodesDataView);
             const linksDataSet = new vdataset_1.DataSet;
             (0, register_1.registerDataSetInstanceParser)(linksDataSet, "dataview", vdataset_1.dataViewParser), 
             (0, register_1.registerDataSetInstanceTransform)(linksDataSet, "sankeyLinks", sankey_links_1.sankeyLinks), 
@@ -264,7 +389,8 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                     beforeCall: data_key_1.initKeyMap,
                     call: data_key_1.addDataKey.bind(this)
                 }
-            }, !1), this._linksSeriesData = new series_data_1.SeriesData(this._option, linksDataView);
+            }, !1), null === (_f = this._data) || void 0 === _f || _f.getDataView().target.addListener("change", linksDataView.reRunAllTransform), 
+            this._linksSeriesData = new series_data_1.SeriesData(this._option, linksDataView);
         }
     }
     initMark() {
@@ -302,8 +428,9 @@ class SankeySeries extends cartesian_1.CartesianSeries {
             y: datum => datum.y0,
             y1: datum => datum.y1,
             fill: datum => {
-                var _a, _b, _c;
-                return null !== (_c = null === (_b = null === (_a = this._spec.node) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fill) && void 0 !== _c ? _c : this.getNodeOrdinalColorScale(datum.key);
+                var _a, _b, _c, _d, _e;
+                const nodeName = null !== (_b = null !== (_a = datum.key) && void 0 !== _a ? _a : datum[this._spec.categoryField]) && void 0 !== _b ? _b : "";
+                return null !== (_e = null === (_d = null === (_c = this._spec.node) || void 0 === _c ? void 0 : _c.style) || void 0 === _d ? void 0 : _d.fill) && void 0 !== _e ? _e : this.getNodeOrdinalColorScale(nodeName);
             }
         }, mark_1.STATE_VALUE_ENUM.STATE_NORMAL, constant_1.AttributeLevel.Mark), this._trigger.registerMark(nodeMark), 
         null === (_a = this._tooltipHelper) || void 0 === _a || _a.activeTriggerSet.mark.add(nodeMark));
@@ -331,7 +458,7 @@ class SankeySeries extends cartesian_1.CartesianSeries {
             x: datum => datum.x0,
             y: datum => (datum.y0 + datum.y1) / 2,
             fill: "#ffffff",
-            text: datum => (null == datum ? void 0 : datum.datum) ? datum.datum[this._spec.categoryField] : "",
+            text: datum => this._createText(datum),
             limit: datum => {
                 var _a;
                 return null !== (_a = this._spec.label.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
@@ -342,7 +469,7 @@ class SankeySeries extends cartesian_1.CartesianSeries {
             x: datum => (datum.x0 + datum.x1) / 2,
             y: datum => (datum.y0 + datum.y1) / 2,
             fill: "#ffffff",
-            text: datum => (null == datum ? void 0 : datum.datum) ? datum.datum[this._spec.categoryField] : "",
+            text: datum => this._createText(datum),
             limit: datum => {
                 var _a;
                 return null !== (_a = this._spec.label.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
@@ -353,7 +480,7 @@ class SankeySeries extends cartesian_1.CartesianSeries {
             x: datum => datum.x1,
             y: datum => (datum.y0 + datum.y1) / 2,
             fill: "#ffffff",
-            text: datum => (null == datum ? void 0 : datum.datum) ? datum.datum[this._spec.categoryField] : "",
+            text: datum => this._createText(datum),
             limit: datum => {
                 var _a;
                 return null !== (_a = this._spec.label.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
@@ -367,7 +494,7 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                 var _a, _b, _c;
                 return null !== (_c = null === (_b = null === (_a = this._spec.node) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fill) && void 0 !== _c ? _c : this.getNodeOrdinalColorScale(datum.key);
             },
-            text: datum => (null == datum ? void 0 : datum.datum) ? datum.datum[this._spec.categoryField] : "",
+            text: datum => this._createText(datum),
             limit: this._labelLimit,
             textAlign: "center",
             textBaseline: datum => datum.y1 >= this._viewBox.y2 ? "bottom" : "top"
@@ -375,7 +502,7 @@ class SankeySeries extends cartesian_1.CartesianSeries {
             x: datum => datum.x0,
             y: datum => (datum.y0 + datum.y1) / 2,
             fill: "#ffffff",
-            text: datum => (null == datum ? void 0 : datum.datum) ? datum.datum[this._spec.categoryField] : "",
+            text: datum => this._createText(datum),
             limit: datum => {
                 var _a;
                 return null !== (_a = this._spec.label.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
@@ -386,7 +513,7 @@ class SankeySeries extends cartesian_1.CartesianSeries {
             x: datum => (datum.x0 + datum.x1) / 2,
             y: datum => (datum.y0 + datum.y1) / 2,
             fill: "#ffffff",
-            text: datum => (null == datum ? void 0 : datum.datum) ? datum.datum[this._spec.categoryField] : "",
+            text: datum => this._createText(datum),
             limit: datum => {
                 var _a;
                 return null !== (_a = this._spec.label.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
@@ -397,7 +524,7 @@ class SankeySeries extends cartesian_1.CartesianSeries {
             x: datum => datum.x1,
             y: datum => (datum.y0 + datum.y1) / 2,
             fill: "#ffffff",
-            text: datum => (null == datum ? void 0 : datum.datum) ? datum.datum[this._spec.categoryField] : "",
+            text: datum => this._createText(datum),
             limit: datum => {
                 var _a;
                 return null !== (_a = this._spec.label.limit) && void 0 !== _a ? _a : datum.x1 - datum.x0;
@@ -411,7 +538,7 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                 var _a, _b, _c;
                 return null !== (_c = null === (_b = null === (_a = this._spec.node) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fill) && void 0 !== _c ? _c : this.getNodeOrdinalColorScale(datum.key);
             },
-            text: datum => (null == datum ? void 0 : datum.datum) ? datum.datum[this._spec.categoryField] : "",
+            text: datum => this._createText(datum),
             limit: this._labelLimit,
             textAlign: "right",
             textBaseline: "middle"
@@ -422,7 +549,7 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                 var _a, _b, _c;
                 return null !== (_c = null === (_b = null === (_a = this._spec.node) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fill) && void 0 !== _c ? _c : this.getNodeOrdinalColorScale(datum.key);
             },
-            text: datum => (null == datum ? void 0 : datum.datum) ? datum.datum[this._spec.categoryField] : "",
+            text: datum => this._createText(datum),
             limit: this._labelLimit,
             textAlign: "left",
             textBaseline: "middle"
@@ -433,13 +560,20 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                 var _a, _b, _c;
                 return null !== (_c = null === (_b = null === (_a = this._spec.node) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fill) && void 0 !== _c ? _c : this.getNodeOrdinalColorScale(datum.key);
             },
-            text: datum => (null == datum ? void 0 : datum.datum) ? datum.datum[this._spec.categoryField] : "",
+            text: datum => this._createText(datum),
             limit: this._labelLimit,
             textAlign: datum => datum.x1 >= this._viewBox.x2 ? "right" : "left",
             textBaseline: "middle"
         }, mark_1.STATE_VALUE_ENUM.STATE_NORMAL, constant_1.AttributeLevel.Series), this._labelMark.setZIndex(this._labelLayoutZIndex), 
         this._trigger.registerMark(this._labelMark), null === (_a = this._tooltipHelper) || void 0 === _a || _a.activeTriggerSet.mark.add(this._labelMark));
     }
+    _createText(datum) {
+        var _a;
+        if ((0, util_2.isNil)(datum) || (0, util_2.isNil)(datum.datum)) return "";
+        let text = datum.datum[this._spec.categoryField] || "";
+        return (null === (_a = this._spec.label) || void 0 === _a ? void 0 : _a.formatMethod) && (text = this._spec.label.formatMethod(text, datum.datum)), 
+        text;
+    }
     initAnimation() {
         var _a, _b;
         const animationParams = {
@@ -457,27 +591,47 @@ class SankeySeries extends cartesian_1.CartesianSeries {
         utils_1.userAnimationConfig)(interface_1.SeriesMarkNameEnum.label, this._spec)));
     }
     initEvent() {
-        var _a, _b, _c, _d, _e, _f;
-        super.initEvent(), (null === (_a = this._spec.emphasis) || void 0 === _a ? void 0 : _a.enable) && "adjacency" === (null === (_b = this._spec.emphasis) || void 0 === _b ? void 0 : _b.effect) && ("hover" === (null === (_c = this._spec.emphasis) || void 0 === _c ? void 0 : _c.trigger) ? this.event.on("pointerover", {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        super.initEvent(), null === (_a = this._nodesSeriesData.getDataView()) || void 0 === _a || _a.target.addListener("change", this.nodesSeriesDataUpdate.bind(this)), 
+        null === (_b = this._linksSeriesData.getDataView()) || void 0 === _b || _b.target.addListener("change", this.linksSeriesDataUpdate.bind(this)), 
+        (null === (_c = this._spec.emphasis) || void 0 === _c ? void 0 : _c.enable) && "adjacency" === (null === (_d = this._spec.emphasis) || void 0 === _d ? void 0 : _d.effect) && ("hover" === (null === (_e = this._spec.emphasis) || void 0 === _e ? void 0 : _e.trigger) ? this.event.on("pointerover", {
             level: constant_1.Event_Bubble_Level.mark
         }, this._handleAdjacencyClick) : this.event.on("pointerdown", {
             level: constant_1.Event_Bubble_Level.mark
-        }, this._handleAdjacencyClick)), (null === (_d = this._spec.emphasis) || void 0 === _d ? void 0 : _d.enable) && "related" === (null === (_e = this._spec.emphasis) || void 0 === _e ? void 0 : _e.effect) && ("hover" === (null === (_f = this._spec.emphasis) || void 0 === _f ? void 0 : _f.trigger) ? this.event.on("pointerover", {
+        }, this._handleAdjacencyClick)), (null === (_f = this._spec.emphasis) || void 0 === _f ? void 0 : _f.enable) && "related" === (null === (_g = this._spec.emphasis) || void 0 === _g ? void 0 : _g.effect) && ("hover" === (null === (_h = this._spec.emphasis) || void 0 === _h ? void 0 : _h.trigger) ? this.event.on("pointerover", {
             level: constant_1.Event_Bubble_Level.mark
         }, this._handleRelatedClick) : this.event.on("pointerdown", {
             level: constant_1.Event_Bubble_Level.mark
         }, this._handleRelatedClick));
     }
+    nodesSeriesDataUpdate() {
+        this.event.emit(constant_1.ChartEvent.legendFilter, {
+            model: this
+        }), this._nodesSeriesData.updateData();
+    }
+    linksSeriesDataUpdate() {
+        this.event.emit(constant_1.ChartEvent.legendFilter, {
+            model: this
+        }), this._linksSeriesData.updateData();
+    }
     initTooltip() {
         this._tooltipHelper = new tooltip_helper_1.SankeySeriesTooltipHelper(this);
     }
     getNodeOrdinalColorScale(item) {
-        var _a, _b, _c, _d;
-        const colorDomain = this._nodesSeriesData.getDataView().latestData.map((datum => datum.key)), colorRange = null !== (_b = null === (_a = this._option.globalScale.color) || void 0 === _a ? void 0 : _a.range()) && void 0 !== _b ? _b : (0, 
+        var _a, _b, _c, _d, _e, _f, _g;
+        const colorDomain = (null === (_a = this._rawData.latestData[0]) || void 0 === _a ? void 0 : _a.nodes) ? (null === (_b = this._rawData.latestData[0].nodes[0]) || void 0 === _b ? void 0 : _b.children) ? Array.from(this.extractNamesFromTree(this._rawData.latestData[0].nodes)) : this._rawData.latestData[0].nodes.map(((datum, index) => this._spec.nodeKey ? datum[this._spec.categoryField] : index)) : null === (_c = this._rawData.latestData[0]) || void 0 === _c ? void 0 : _c.values.map(((datum, index) => this._spec.nodeKey ? datum[this._spec.categoryField] : index)), colorRange = null !== (_e = null === (_d = this._option.globalScale.color) || void 0 === _d ? void 0 : _d.range()) && void 0 !== _e ? _e : (0, 
         util_1.getDataScheme)(this._option.getTheme().colorScheme, this.type), ordinalScale = new color_ordinal_scale_1.ColorOrdinalScale;
-        return null === (_d = (_c = ordinalScale.domain(colorDomain)).range) || void 0 === _d || _d.call(_c, colorRange), 
+        return null === (_g = (_f = ordinalScale.domain(colorDomain)).range) || void 0 === _g || _g.call(_f, colorRange), 
         ordinalScale.scale(item);
     }
+    extractNamesFromTree(tree) {
+        const uniqueNames = new Set;
+        return tree.forEach((node => {
+            if (uniqueNames.add(node.name), node.children) {
+                this.extractNamesFromTree(node.children).forEach((name => uniqueNames.add(name)));
+            }
+        })), uniqueNames;
+    }
     getDimensionField() {
         return [ this._spec.categoryField ];
     }