@visactor/vchart 1.13.7-alpha.0 → 2.0.0-alpha.0

package/cjs/series/sankey/sankey.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.registerSankeySeries = exports.SankeySeries = void 0;
 
-const cartesian_1 = require("../cartesian/cartesian"), type_1 = require("../interface/type"), 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"), interface_1 = require("../../compile/mark/interface"), vdataset_1 = require("@visactor/vdataset"), layout_1 = require("../../constant/layout"), attribute_1 = require("../../constant/attribute"), event_1 = require("../../constant/event"), series_data_1 = require("../base/series-data"), tooltip_helper_1 = require("./tooltip-helper"), vutils_1 = require("@visactor/vutils"), animation_1 = require("./animation"), color_ordinal_scale_1 = require("../../scale/color-ordinal-scale"), rect_1 = require("../../mark/rect"), text_1 = require("../../mark/text"), link_path_1 = require("../../mark/link-path"), constant_1 = require("./constant"), flatten_1 = require("../../data/transforms/flatten"), factory_1 = require("../../core/factory"), initialize_1 = require("../../data/initialize"), data_key_1 = require("../../data/transforms/data-key"), sankey_transformer_1 = require("./sankey-transformer"), util_1 = require("../../component/util");
+const cartesian_1 = require("../cartesian/cartesian"), type_1 = require("../interface/type"), 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"), interface_1 = require("../../compile/mark/interface"), vdataset_1 = require("@visactor/vdataset"), layout_1 = require("../../constant/layout"), attribute_1 = require("../../constant/attribute"), event_1 = require("../../constant/event"), tooltip_helper_1 = require("./tooltip-helper"), vutils_1 = require("@visactor/vutils"), animation_1 = require("./animation"), color_ordinal_scale_1 = require("../../scale/color-ordinal-scale"), rect_1 = require("../../mark/rect"), text_1 = require("../../mark/text"), link_path_1 = require("../../mark/link-path"), constant_1 = require("./constant"), flatten_1 = require("../../data/transforms/flatten"), factory_1 = require("../../core/factory"), initialize_1 = require("../../data/initialize"), data_key_1 = require("../../data/transforms/data-key"), sankey_transformer_1 = require("./sankey-transformer"), util_1 = require("../../component/util"), util_2 = require("../../util"), glyph_1 = require("../../mark/utils/glyph");
 
 class SankeySeries extends cartesian_1.CartesianSeries {
     constructor() {
@@ -21,75 +21,73 @@ class SankeySeries extends cartesian_1.CartesianSeries {
             }
             return null === (_e = this._colorScale) || void 0 === _e ? void 0 : _e.scale(this._getNodeNameFromData(datum));
         }, this._fillByLink = datum => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f;
             const fill = null === (_b = null === (_a = this._spec.link) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fill;
             if (fill) return fill;
             if ((0, vutils_1.isValid)(this._spec.seriesField)) {
-                const sourceNode = null === (_d = null === (_c = this._nodesSeriesData) || void 0 === _c ? void 0 : _c.getLatestData()) || void 0 === _d ? void 0 : _d.find((entry => datum.source === entry.key)), nodeDatum = null == sourceNode ? void 0 : sourceNode.datum, colorScale = null === (_f = null === (_e = this._option) || void 0 === _e ? void 0 : _e.globalScale) || void 0 === _f ? void 0 : _f.getScale("color");
+                const sourceNode = null === (_c = this._nodesSeriesData.latestData) || void 0 === _c ? void 0 : _c.find((entry => datum.source === entry.key)), nodeDatum = null == sourceNode ? void 0 : sourceNode.datum, colorScale = null === (_e = null === (_d = this._option) || void 0 === _d ? void 0 : _d.globalScale) || void 0 === _e ? void 0 : _e.getScale("color");
                 return null == colorScale ? void 0 : colorScale.scale(null == nodeDatum ? void 0 : nodeDatum[this._spec.seriesField]);
             }
             const sourceName = (0, vutils_1.isNumber)(datum.source) ? this.getNodeList()[datum.source] : datum.source;
-            return null === (_g = this._colorScale) || void 0 === _g ? void 0 : _g.scale(sourceName);
+            return null === (_f = this._colorScale) || void 0 === _f ? void 0 : _f.scale(sourceName);
         }, this._handleEmphasisElement = params => {
-            var _a, _b, _c, _d, _e;
-            const emphasisSpec = null !== (_a = this._spec.emphasis) && void 0 !== _a ? _a : {}, element = params.item;
-            "adjacency" === emphasisSpec.effect ? element && element.mark === (null === (_b = this._nodeMark) || void 0 === _b ? void 0 : _b.getProduct()) ? this._handleNodeAdjacencyClick(element) : element && element.mark === (null === (_c = this._linkMark) || void 0 === _c ? void 0 : _c.getProduct()) ? this._handleLinkAdjacencyClick(element) : this._handleClearEmpty() : "related" === emphasisSpec.effect && (element && element.mark === (null === (_d = this._nodeMark) || void 0 === _d ? void 0 : _d.getProduct()) ? this._handleNodeRelatedClick(element) : element && element.mark === (null === (_e = this._linkMark) || void 0 === _e ? void 0 : _e.getProduct()) ? this._handleLinkRelatedClick(element) : this._handleClearEmpty());
+            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.getProductElements();
+            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.getProductElements();
-            if (!allLinkElements || !allLinkElements.length) return;
-            const states = [ interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE ];
-            allNodeElements.forEach((el => {
-                el.removeState(states);
+            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(states);
-            })), this._needClear = !1;
-        }, this._handleNodeAdjacencyClick = element => {
-            const nodeDatum = element.getDatum(), highlightNodes = [ nodeDatum.key ];
+                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.getProductElements();
+                const allLinkElements = this._linkMark.getGraphics();
                 if (!allLinkElements || !allLinkElements.length) return;
                 allLinkElements.forEach(((linkEl, i) => {
-                    const linkDatum = linkEl.getDatum();
+                    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)) : linkDatum.target === nodeDatum.key ? (highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source), 
+                    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)) : (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
-                    linkEl.addState(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.getProductElements(), highlightNodes), 
+            this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes), 
             this._needClear = !0;
-        }, this._handleLinkAdjacencyClick = element => {
-            const curLinkDatum = element.getDatum(), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ];
+        }, this._handleLinkAdjacencyClick = graphic => {
+            const curLinkDatum = (0, util_2.getDatumOfGraphic)(graphic), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ];
             if (this._linkMark) {
-                const allLinkElements = this._linkMark.getProductElements();
+                const allLinkElements = this._linkMark.getGraphics();
                 if (!allLinkElements || !allLinkElements.length) return;
                 allLinkElements.forEach((linkEl => {
-                    linkEl === element ? (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                    linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                    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));
+                    })) : (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.getProductElements(), highlightNodes), 
+            this._nodeMark && this._highLightElements(this._nodeMark.getGraphics(), highlightNodes), 
             this._needClear = !0;
-        }, this._handleNodeRelatedClick = element => {
+        }, this._handleNodeRelatedClick = graphic => {
             var _a;
-            const nodeDatum = element.getDatum(), allNodeElements = this._nodeMark.getProductElements();
+            const nodeDatum = (0, util_2.getDatumOfGraphic)(graphic), allNodeElements = this._nodeMark.getGraphics();
             if (!allNodeElements || !allNodeElements.length) return;
-            const allLinkElements = this._linkMark.getProductElements();
+            const allLinkElements = this._linkMark.getGraphics();
             if (!allLinkElements || !allLinkElements.length) return;
-            const father = (null === (_a = allLinkElements[0].getDatum()) || void 0 === _a ? void 0 : _a.parents) ? "parents" : "source";
+            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 = linkEl.getDatum(), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source";
+                    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), 
@@ -127,16 +125,17 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                         }
                     }
                 })), this._linkMark) {
-                    const allLinkElements = this._linkMark.getProductElements();
+                    const allLinkElements = this._linkMark.getGraphics();
                     if (!allLinkElements || !allLinkElements.length) return;
                     allLinkElements.forEach(((linkEl, i) => {
                         var _a;
-                        highlightLinks.includes(null !== (_a = linkEl.getDatum().key) && void 0 !== _a ? _a : linkEl.getDatum().index) ? (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                        linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS)) : (linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
-                        linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE));
+                        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.getProductElements(), highlightNodes);
+                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 => {
@@ -151,41 +150,37 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                     }
                 })), res)), []);
                 allLinkElements.forEach(((linkEl, i) => {
-                    const linkDatum = linkEl.getDatum(), 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));
+                    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 linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                        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 linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                    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);
-                })), this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes);
+                    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 = element => {
-            var _a;
-            const allNodeElements = this._nodeMark.getProductElements();
+        }, this._handleLinkRelatedClick = graphic => {
+            const allNodeElements = this._nodeMark.getGraphics();
             if (!allNodeElements || !allNodeElements.length) return;
-            const allLinkElements = this._linkMark.getProductElements();
+            const allLinkElements = this._linkMark.getGraphics();
             if (!allLinkElements || !allLinkElements.length) return;
-            if ("source" === ((null === (_a = element.getDatum()) || void 0 === _a ? void 0 : _a.parents) ? "parents" : "source")) {
-                const states = [ interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE ];
-                this._linkMark && allLinkElements.forEach((linkEl => {
-                    linkEl.removeState(states);
-                })), this._nodeMark && allNodeElements.forEach((el => {
-                    el.removeState(states);
-                }));
-            } else {
-                const curLinkDatum = element.getDatum(), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ], upstreamLinks = [];
+            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++) {
@@ -201,9 +196,9 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                         });
                     }
                 })), allLinkElements.forEach((linkEl => {
-                    const linkDatum = linkEl.getDatum(), originalDatum = linkDatum.datum;
+                    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 linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                    void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                         ratio: 1
                     });
                     const selectedDatum = originalDatum ? originalDatum.filter((entry => {
@@ -213,12 +208,12 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                     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) => {
+                        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), ratio = val / linkDatum.value;
+                        })))).reduce(((sum, d) => sum + d.value), 0) / linkDatum.value;
                         return linkEl.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), 
-                        void linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                        void (0, glyph_1.addRuntimeState)(linkEl, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
                             ratio: ratio
                         });
                     }
@@ -226,10 +221,10 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                     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 linkEl.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, {
+                    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);
+                    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;
@@ -329,8 +324,7 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                     beforeCall: data_key_1.initKeyMap.bind(this),
                     call: data_key_1.addDataKey
                 }
-            }, !1), this._nodesSeriesData = new series_data_1.SeriesData(this._option, nodesDataView), 
-            (0, register_1.registerDataSetInstanceTransform)(dataSet, "sankeyLinks", sankey_links_1.sankeyLinks);
+            }, !1), this._nodesSeriesData = nodesDataView, (0, register_1.registerDataSetInstanceTransform)(dataSet, "sankeyLinks", sankey_links_1.sankeyLinks);
             const linksDataView = new vdataset_1.DataView(dataSet, {
                 name: `sankey-link-${this.id}-data`
             });
@@ -344,37 +338,28 @@ class SankeySeries extends cartesian_1.CartesianSeries {
                     beforeCall: data_key_1.initKeyMap.bind(this),
                     call: data_key_1.addDataKey
                 }
-            }, !1), this._linksSeriesData = new series_data_1.SeriesData(this._option, linksDataView);
+            }, !1), this._linksSeriesData = linksDataView;
         }
     }
     compileData() {
         var _a, _b;
-        super.compileData(), null === (_a = this._linksSeriesData) || void 0 === _a || _a.compile(), 
-        null === (_b = this._nodesSeriesData) || void 0 === _b || _b.compile();
+        super.compileData(), null === (_a = this._linkMark) || void 0 === _a || _a.compileData(), 
+        null === (_b = this._nodeMark) || void 0 === _b || _b.compileData();
     }
     initMark() {
-        var _a, _b, _c, _d;
         this._rootMark.setMarkConfig({
             overflow: this._spec.overflow,
             interactive: !!this._spec.overflow
         });
         const nodeMark = this._createMark(SankeySeries.mark.node, {
             isSeriesMark: !0,
-            dataView: this._nodesSeriesData.getDataView(),
-            dataProductId: this._nodesSeriesData.getProductId(),
-            stateSort: null === (_a = this._spec.node) || void 0 === _a ? void 0 : _a.stateSort
-        }, {
-            setCustomizedShape: null === (_b = this._spec.node) || void 0 === _b ? void 0 : _b.customShape
+            dataView: this._nodesSeriesData
         });
         nodeMark && (nodeMark.setMarkConfig({
             zIndex: this._nodeLayoutZIndex
         }), this._nodeMark = nodeMark);
         const linkMark = this._createMark(SankeySeries.mark.link, {
-            dataView: this._linksSeriesData.getDataView(),
-            dataProductId: this._linksSeriesData.getProductId(),
-            stateSort: null === (_c = this._spec.link) || void 0 === _c ? void 0 : _c.stateSort
-        }, {
-            setCustomizedShape: null === (_d = this._spec.link) || void 0 === _d ? void 0 : _d.customShape
+            dataView: this._linksSeriesData
         });
         linkMark && (this._linkMark = linkMark);
     }
@@ -383,11 +368,11 @@ class SankeySeries extends cartesian_1.CartesianSeries {
         this._markAttributeContext.valueToLink = this.valueToLink.bind(this);
     }
     valueToNode(value) {
-        const nodes = this._nodesSeriesData.getLatestData(), specifyValue = (0, vutils_1.array)(value)[0];
+        const nodes = this._nodesSeriesData.latestData, specifyValue = (0, vutils_1.array)(value)[0];
         return nodes && nodes.find((node => node.key === specifyValue));
     }
     valueToLink(value) {
-        const links = this._linksSeriesData.getLatestData(), specifyValue = (0, vutils_1.array)(value);
+        const links = this._linksSeriesData.latestData, specifyValue = (0, vutils_1.array)(value);
         return links && links.find((link => link && link.source === specifyValue[0] && link.target === specifyValue[1]));
     }
     valueToPositionX(value) {
@@ -417,13 +402,14 @@ class SankeySeries extends cartesian_1.CartesianSeries {
     _initLinkMarkStyle() {
         var _a, _b;
         const linkMark = this._linkMark;
-        linkMark && (this.setMarkStyle(linkMark, {
+        linkMark && (linkMark.setGlyphConfig({
+            direction: this.direction
+        }), this.setMarkStyle(linkMark, {
             x0: datum => datum.x0,
             x1: datum => datum.x1,
             y0: datum => datum.y0,
             y1: datum => datum.y1,
-            thickness: datum => datum.thickness,
-            direction: this.direction
+            thickness: datum => datum.thickness
         }, interface_1.STATE_VALUE_ENUM.STATE_NORMAL, attribute_1.AttributeLevel.Series), 
         this.setMarkStyle(linkMark, {
             fill: null !== (_b = null === (_a = this._spec.link.style) || void 0 === _a ? void 0 : _a.fill) && void 0 !== _b ? _b : this._fillByLink
@@ -472,8 +458,8 @@ class SankeySeries extends cartesian_1.CartesianSeries {
     }
     initEvent() {
         var _a, _b, _c;
-        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));
+        super.initEvent(), null === (_a = this._nodesSeriesData) || void 0 === _a || _a.target.addListener("change", this.nodesSeriesDataUpdate.bind(this)), 
+        null === (_b = this._linksSeriesData) || void 0 === _b || _b.target.addListener("change", this.linksSeriesDataUpdate.bind(this));
         const emphasisSpec = null !== (_c = this._spec.emphasis) && void 0 !== _c ? _c : {};
         if (!0 !== this._option.disableTriggerEvent && emphasisSpec.enable && ("adjacency" === emphasisSpec.effect || "related" === emphasisSpec.effect)) {
             const event = "hover" === emphasisSpec.trigger ? "pointerover" : "pointerdown";
@@ -483,15 +469,15 @@ class SankeySeries extends cartesian_1.CartesianSeries {
         }
     }
     nodesSeriesDataUpdate() {
-        this._nodesSeriesData.updateData(), this._nodeList = null, this._setNodeOrdinalColorScale();
+        this._nodeMark.getData().updateData(), this._nodeList = null, this._setNodeOrdinalColorScale();
     }
     linksSeriesDataUpdate() {
-        this._linksSeriesData.updateData();
+        this._linkMark.getData().updateData();
     }
-    _highLightElements(vGrammarElements, highlightNodes) {
-        vGrammarElements && vGrammarElements.length && vGrammarElements.forEach((el => {
-            el.removeState([ interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS ]), 
-            highlightNodes.includes(el.getDatum().key) ? el.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS) : el.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE);
+    _highLightElements(graphics, highlightNodes) {
+        graphics && graphics.length && graphics.forEach((g => {
+            g.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE), g.removeState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS), 
+            highlightNodes.includes((0, util_2.getDatumOfGraphic)(g).key) ? g.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS, !0) : g.addState(interface_1.STATE_VALUE_ENUM.STATE_SANKEY_EMPHASIS_REVERSE, !0);
         }));
     }
     initTooltip() {
@@ -563,8 +549,8 @@ class SankeySeries extends cartesian_1.CartesianSeries {
         }
         return keyArray;
     }
-    onLayoutEnd(ctx) {
-        super.onLayoutEnd(ctx), this._viewBox.set(0, 0, this._region.getLayoutRect().width, this._region.getLayoutRect().height), 
+    onLayoutEnd() {
+        super.onLayoutEnd(), this._viewBox.set(0, 0, this._region.getLayoutRect().width, this._region.getLayoutRect().height), 
         this.getViewData().reRunAllTransform();
     }
     getDefaultShapeType() {
@@ -584,9 +570,9 @@ SankeySeries.transformerConstructor = sankey_transformer_1.SankeySeriesSpecTrans
 SankeySeries.mark = constant_1.sankeySeriesMark;
 
 const registerSankeySeries = () => {
-    (0, vgrammar_sankey_1.registerSankeyTransforms)(), (0, rect_1.registerRectMark)(), 
-    (0, link_path_1.registerLinkPathMark)(), (0, text_1.registerTextMark)(), (0, animation_1.registerSankeyAnimation)(), 
-    (0, config_1.registerFadeInOutAnimation)(), factory_1.Factory.registerSeries(SankeySeries.type, SankeySeries);
+    (0, rect_1.registerRectMark)(), (0, link_path_1.registerLinkPathMark)(), (0, text_1.registerTextMark)(), 
+    (0, animation_1.registerSankeyAnimation)(), (0, config_1.registerFadeInOutAnimation)(), 
+    factory_1.Factory.registerSeries(SankeySeries.type, SankeySeries);
 };
 
 exports.registerSankeySeries = registerSankeySeries;