feat(sunburst): enable highlight descendants and ancestors

src/chart/sunburst/SunburstPiece.js

 import * as zrUtil from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
 
+var NodeHighlightPolicy = {
+    NONE: 0, // not downplay others
+    DESCENDANT: 1,
+    ANCESTOR: 2,
+    SELF: 3
+};
+
 /**
  * Sunburstce of Sunburst including Sector, Label, LabelLine
  * @constructor
@@ -19,6 +26,8 @@ function SunburstPiece(node, seriesModel, ecModel) {
     this.add(polyline);
     this.add(text);
 
+    this.node = node;
+
     this.updateData(node, true, seriesModel, ecModel);
 
     // Hover to change label and labelLine
@@ -44,7 +53,6 @@ SunburstPieceProto.updateData = function (
     seriesModel,
     ecModel
 ) {
-
     var sector = this.childAt(0);
 
     // var seriesModel = node.hostModel;
@@ -92,42 +100,63 @@ SunburstPieceProto.updateData = function (
     var cursorStyle = itemModel.getShallow('cursor');
     cursorStyle && sector.attr('cursor', cursorStyle);
 
-    function onEmphasis() {
-        // Sector may has animation of updating data. Force to move to the last frame
-        // Or it may stopped on the wrong shape
-        // sector.stopAnimation(true);
-        // sector.animateTo({
-        //     shape: {
-        //         r: layout.r + seriesModel.get('hoverOffset')
-        //     }
-        // }, 300, 'elasticOut');
-    }
-    function onNormal() {
-        // sector.stopAnimation(true);
-
-        // var duration = 300;
-        // var delay = node.depth * duration;
-
-        // sector.animateTo({
-        //     shape: {
-        //         r: layout.r
-        //     }
-        // }, duration, delay, 'elasticOut');
-    }
-    sector.off('mouseover').off('mouseout').off('emphasis').off('normal');
-    if (itemModel.get('hoverAnimation') && seriesModel.isAnimationEnabled()) {
-        sector
-            .on('mouseover', onEmphasis)
-            .on('mouseout', onNormal)
-            .on('emphasis', onEmphasis)
-            .on('normal', onNormal);
-    }
+    this._initEvents(sector, node, seriesModel);
 
     // this._updateLabel(data, idx);
 
     graphic.setHoverStyle(this);
 };
 
+SunburstPieceProto.onEmphasis = function () {
+    var policy = NodeHighlightPolicy.DESCENDANT; // TODO: change to real policy
+
+    var that = this;
+    this.node.hostTree.root.eachNode(function (n) {
+        if (n.piece) {
+            if (isNodeHighlighted(n, that.node, policy)) {
+                n.piece.childAt(0).trigger('highlight');
+            }
+            else if (policy !== NodeHighlightPolicy.NONE) {
+                n.piece.childAt(0).trigger('downplay');
+            }
+        }
+    });
+};
+
+SunburstPieceProto.onNormal = function () {
+    this.node.hostTree.root.eachNode(function (n) {
+        if (n.piece) {
+            var itemStyleModel = n.getModel('itemStyle.normal');
+            var opacity = itemStyleModel.getItemStyle().opacity || 1;
+
+            var sector = n.piece.childAt(0);
+            sector.animateTo({
+                style: {
+                    opacity: opacity
+                }
+            });
+        }
+    });
+};
+
+SunburstPieceProto.onHighlight = function () {
+    var sector = this.childAt(0);
+    sector.animateTo({
+        style: {
+            opacity: 1
+        }
+    });
+};
+
+SunburstPieceProto.onDownplay = function () {
+    var sector = this.childAt(0);
+    sector.animateTo({
+        style: {
+            opacity: 0.5
+        }
+    });
+};
+
 SunburstPieceProto._updateLabel = function (data, idx) {
 
     // var labelLine = this.childAt(1);
@@ -205,6 +234,36 @@ SunburstPieceProto._updateLabel = function (data, idx) {
     // });
 };
 
+SunburstPieceProto._initEvents = function (sector, node, seriesModel) {
+    var itemModel = node.getModel();
+
+    sector.off('mouseover').off('mouseout').off('emphasis').off('normal');
+
+    var that = this;
+    var onEmphasis = function () {
+        that.onEmphasis();
+    };
+    var onNormal = function () {
+        that.onNormal();
+    };
+    var onDownplay = function () {
+        that.onDownplay();
+    };
+    var onHighlight = function () {
+        that.onHighlight();
+    };
+
+    if (itemModel.get('hoverAnimation') && seriesModel.isAnimationEnabled()) {
+        sector
+            .on('mouseover', onEmphasis)
+            .on('mouseout', onNormal)
+            .on('emphasis', onEmphasis)
+            .on('normal', onNormal)
+            .on('downplay', onDownplay)
+            .on('highlight', onHighlight);
+    }
+};
+
 zrUtil.inherits(SunburstPiece, graphic.Group);
 
 export default SunburstPiece;
@@ -253,3 +312,18 @@ function getRootId(node) {
     var virtualRoot = node.getAncestors()[0];
     return zrUtil.indexOf(virtualRoot.children, ancestor);
 }
+
+function isNodeHighlighted(node, activeNode, policy) {
+    if (policy === NodeHighlightPolicy.NONE) {
+        return false;
+    }
+    else if (policy === NodeHighlightPolicy.SELF) {
+        return node === activeNode;
+    }
+    else if (policy === NodeHighlightPolicy.ANCESTOR) {
+        return  node === activeNode || node.isAncestorOf(activeNode);
+    }
+    else {
+        return node === activeNode || node.isDescendantOf(activeNode);
+    }
+}

src/chart/sunburst/SunburstView.js

@@ -51,6 +51,7 @@ var SunburstView = ChartView.extend({
         treeRoot.eachNode(function (node) {
             if (node !== treeRoot) {
                 var piece = new SunburstPiece(node, seriesModel, ecModel);
+                node.piece = piece;
                 group.add(piece);
             }
         });

src/data/Tree.js

@@ -283,6 +283,35 @@ TreeNode.prototype = {
      */
     getId: function () {
         return this.hostTree.data.getId(this.dataIndex);
+    },
+
+    /**
+     * if this is an ancestor of another node
+     *
+     * @public
+     * @param {TreeNode} node another node
+     * @return {boolean} if is ancestor
+     */
+    isAncestorOf: function (node) {
+        var parent = node.parentNode;
+        while (parent) {
+            if (parent === this) {
+                return true;
+            }
+            parent = parent.parentNode;
+        }
+        return false;
+    },
+
+    /**
+     * if this is an descendant of another node
+     *
+     * @public
+     * @param {TreeNode} node another node
+     * @return {boolean} if is descendant
+     */
+    isDescendantOf: function (node) {
+        return node !== this && node.isAncestorOf(this);
     }
 };
 

test/sunburst.html

@@ -37,7 +37,12 @@
                                     value: 2
                                 }, {
                                     name: 'Cousin Mary',
-                                    value: 5
+                                    value: 5,
+                                    itemStyle: {
+                                        normal: {
+                                            opacity: 0.2
+                                        }
+                                    }
                                 }, {
                                     name: 'Cousin Ben',
                                     value: 4