@visactor/vchart 1.2.3 → 1.3.0-beta.0

package/esm/series/sankey/sankey.js

@@ -2,8 +2,6 @@ import { CartesianSeries } from "../cartesian/cartesian";
 
 import { SeriesMarkNameEnum, SeriesTypeEnum } from "../interface";
 
-import { MarkTypeEnum } from "../../mark/interface";
-
 import { registerSankeyTransforms } from "@visactor/vgrammar-sankey";
 
 import { animationConfig, userAnimationConfig } from "../../animation/utils";
@@ -22,7 +20,7 @@ import { STATE_VALUE_ENUM } from "../../compile/mark";
 
 import { DataView, DataSet, dataViewParser } from "@visactor/vdataset";
 
-import { DEFAULT_DATA_INDEX, LayoutZIndex, AttributeLevel, Event_Bubble_Level } from "../../constant";
+import { DEFAULT_DATA_INDEX, LayoutZIndex, AttributeLevel, Event_Bubble_Level, ChartEvent } from "../../constant";
 
 import { SeriesData } from "../base/series-data";
 
@@ -36,12 +34,10 @@ import { SankeySeriesTooltipHelper } from "./tooltip-helper";
 
 import { Bounds } from "@visactor/vutils";
 
-import { array } from "../../util";
+import { array, isNil } from "../../util";
 
 import { ColorOrdinalScale } from "../../scale/color-ordinal-scale";
 
-import { BarSeries } from "../bar/bar";
-
 import { VChart } from "../../core/vchart";
 
 import { RectMark } from "../../mark/rect";
@@ -50,6 +46,10 @@ import { TextMark } from "../../mark/text";
 
 import { LinkPathMark } from "../../mark/link-path";
 
+import { sankeySeriesMark } from "./constant";
+
+import { flatten } from "../../data/transforms/flatten";
+
 VChart.useMark([ RectMark, LinkPathMark, TextMark ]), registerSankeyTransforms();
 
 export class SankeySeries extends CartesianSeries {
@@ -57,10 +57,21 @@ export class SankeySeries extends CartesianSeries {
         super(...arguments), this.type = SeriesTypeEnum.sankey, this._nodeLayoutZIndex = LayoutZIndex.Node, 
         this._labelLayoutZIndex = LayoutZIndex.Label, this._viewBox = new 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 => {
@@ -74,7 +85,8 @@ export class SankeySeries extends 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
@@ -107,10 +119,11 @@ export class SankeySeries extends 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
@@ -131,81 +144,125 @@ export class SankeySeries extends 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 (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 (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) => (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 => {
@@ -223,7 +280,61 @@ export class SankeySeries extends CartesianSeries {
                 vGrammarMark.elements.forEach((el => {
                     el.clearStates();
                 }));
-            }));
+            })); else {
+                const curLinkDatum = element.getDatum(), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ], upstreamLinks = [];
+                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() {
@@ -245,7 +356,7 @@ export class SankeySeries extends 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) {
             registerDataSetInstanceTransform(this._dataSet, "sankey", sankey), this.addViewDataFilter({
                 type: "sankey",
@@ -275,19 +386,32 @@ export class SankeySeries extends CartesianSeries {
             });
             const nodesDataSet = new DataSet;
             registerDataSetInstanceParser(nodesDataSet, "dataview", dataViewParser), registerDataSetInstanceTransform(nodesDataSet, "sankeyNodes", sankeyNodes), 
-            registerDataSetInstanceTransform(nodesDataSet, "addVChartProperty", addVChartProperty);
+            registerDataSetInstanceTransform(nodesDataSet, "addVChartProperty", addVChartProperty), 
+            registerDataSetInstanceTransform(nodesDataSet, "flatten", flatten);
             const nodesDataView = new 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: initKeyMap,
                     call: addDataKey.bind(this)
                 }
-            }, !1), this._nodesSeriesData = new SeriesData(this._option, nodesDataView);
+            }, !1), null === (_e = this._data) || void 0 === _e || _e.getDataView().target.addListener("change", nodesDataView.reRunAllTransform), 
+            this._nodesSeriesData = new SeriesData(this._option, nodesDataView);
             const linksDataSet = new DataSet;
             registerDataSetInstanceParser(linksDataSet, "dataview", dataViewParser), registerDataSetInstanceTransform(linksDataSet, "sankeyLinks", sankeyLinks), 
             registerDataSetInstanceTransform(linksDataSet, "addVChartProperty", addVChartProperty);
@@ -302,7 +426,8 @@ export class SankeySeries extends CartesianSeries {
                     beforeCall: initKeyMap,
                     call: addDataKey.bind(this)
                 }
-            }, !1), this._linksSeriesData = new SeriesData(this._option, linksDataView);
+            }, !1), null === (_f = this._data) || void 0 === _f || _f.getDataView().target.addListener("change", linksDataView.reRunAllTransform), 
+            this._linksSeriesData = new SeriesData(this._option, linksDataView);
         }
     }
     initMark() {
@@ -340,8 +465,9 @@ export class SankeySeries extends 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);
             }
         }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Mark), this._trigger.registerMark(nodeMark), 
         null === (_a = this._tooltipHelper) || void 0 === _a || _a.activeTriggerSet.mark.add(nodeMark));
@@ -369,7 +495,7 @@ export class SankeySeries extends 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;
@@ -380,7 +506,7 @@ export class SankeySeries extends 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;
@@ -391,7 +517,7 @@ export class SankeySeries extends 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;
@@ -405,7 +531,7 @@ export class SankeySeries extends 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"
@@ -413,7 +539,7 @@ export class SankeySeries extends 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;
@@ -424,7 +550,7 @@ export class SankeySeries extends 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;
@@ -435,7 +561,7 @@ export class SankeySeries extends 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;
@@ -449,7 +575,7 @@ export class SankeySeries extends 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"
@@ -460,7 +586,7 @@ export class SankeySeries extends 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"
@@ -471,13 +597,20 @@ export class SankeySeries extends 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"
         }, STATE_VALUE_ENUM.STATE_NORMAL, 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 (isNil(datum) || 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 = {
@@ -492,26 +625,46 @@ export class SankeySeries extends CartesianSeries {
         this._labelMark && this._labelMark.setAnimationConfig(animationConfig(DEFAULT_MARK_ANIMATION.label(), userAnimationConfig(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: Event_Bubble_Level.mark
         }, this._handleAdjacencyClick) : this.event.on("pointerdown", {
             level: 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: Event_Bubble_Level.mark
         }, this._handleRelatedClick) : this.event.on("pointerdown", {
             level: Event_Bubble_Level.mark
         }, this._handleRelatedClick));
     }
+    nodesSeriesDataUpdate() {
+        this.event.emit(ChartEvent.legendFilter, {
+            model: this
+        }), this._nodesSeriesData.updateData();
+    }
+    linksSeriesDataUpdate() {
+        this.event.emit(ChartEvent.legendFilter, {
+            model: this
+        }), this._linksSeriesData.updateData();
+    }
     initTooltip() {
         this._tooltipHelper = new 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 : getDataScheme(this._option.getTheme().colorScheme, this.type), ordinalScale = new ColorOrdinalScale;
-        return null === (_d = (_c = ordinalScale.domain(colorDomain)).range) || void 0 === _d || _d.call(_c, colorRange), 
+        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 : getDataScheme(this._option.getTheme().colorScheme, this.type), ordinalScale = new ColorOrdinalScale;
+        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 ];
     }
@@ -540,14 +693,5 @@ export class SankeySeries extends CartesianSeries {
     _noAnimationDataKey(datum, index) {}
 }
 
-SankeySeries.type = SeriesTypeEnum.sankey, SankeySeries.mark = Object.assign(Object.assign({}, BarSeries.mark), {
-    [SeriesMarkNameEnum.node]: {
-        name: SeriesMarkNameEnum.node,
-        type: MarkTypeEnum.rect
-    },
-    [SeriesMarkNameEnum.link]: {
-        name: SeriesMarkNameEnum.link,
-        type: MarkTypeEnum.linkPath
-    }
-});
+SankeySeries.type = SeriesTypeEnum.sankey, SankeySeries.mark = sankeySeriesMark;
 //# sourceMappingURL=sankey.js.map