feat(sunburst): update animation

src/chart/sunburst/SunburstPiece.js

 import * as zrUtil from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
-import Model from '../../model/Model';
 
 var NodeHighlightPolicy = {
     NONE: 'none', // not downplay others
@@ -69,7 +68,6 @@ SunburstPieceProto.updateData = function (
     var sectorShape = zrUtil.extend({}, layout);
     sectorShape.label = null;
 
-    // Update common style
     var itemStyleModel = itemModel.getModel('itemStyle');
     var visualColor = getNodeColor(node, seriesModel, ecModel);
 
@@ -127,9 +125,8 @@ SunburstPieceProto.updateData = function (
         this._initEvents(sector, node, seriesModel, highlightPolicy);
     }
 
-
-    this._seriesModel = seriesModel;
-    this._ecModel = ecModel;
+    this._seriesModel = seriesModel || this._seriesModel;
+    this._ecModel = ecModel || this._ecModel;
 };
 
 SunburstPieceProto.onEmphasis = function (highlightPolicy) {

src/chart/sunburst/SunburstSeries.js

@@ -73,8 +73,8 @@ export default SeriesModel.extend({
         // 'ancestor', 'self'
         highlightPolicy: 'descendant',
 
-        // 'zoomToNode', 'link', or false
-        nodeClick: 'zoomToNode',
+        // 'rootToNode', 'link', or false
+        nodeClick: 'rootToNode',
 
         renderLabelForZeroData: false,
 

src/chart/sunburst/SunburstView.js

@@ -10,11 +10,6 @@ var SunburstView = ChartView.extend({
     type: 'sunburst',
 
     init: function () {
-        /**
-         * @private
-         * @type {module:echarts/data/Node}
-         */
-        this._oldRoot;
     },
 
     render: function (seriesModel, ecModel, api, payload) {
@@ -26,17 +21,19 @@ var SunburstView = ChartView.extend({
 
         var virtualRoot = seriesModel.getData().tree.root;
 
-        var oldRoot = this._oldRoot;
         var newRoot = seriesModel.getViewRoot();
 
         var group = this.group;
 
         var renderLabelForZeroData = seriesModel.get('renderLabelForZeroData');
 
-        dualTravel(
-            newRoot ? [newRoot] : [],
-            oldRoot ? [oldRoot] : []
-        );
+        var newChildren = [];
+        newRoot.eachNode(function (node) {
+            newChildren.push(node);
+        });
+        var oldChildren = this._oldChildren || [];
+
+        dualTravel(newChildren, oldChildren);
 
         renderRollUp(virtualRoot, newRoot);
 
@@ -56,7 +53,7 @@ var SunburstView = ChartView.extend({
 
         this._initEvents();
 
-        this._oldRoot = newRoot;
+        this._oldChildren = newChildren;
 
         function dualTravel(newChildren, oldChildren) {
             if (newChildren.length === 0 && oldChildren.length === 0) {
@@ -78,11 +75,6 @@ var SunburstView = ChartView.extend({
                 var oldNode = oldId == null ? null : oldChildren[oldId];
 
                 doRenderNode(newNode, oldNode);
-
-                dualTravel(
-                    newNode && newNode.children || [],
-                    oldNode && oldNode.children || []
-                );
             }
         }
 
@@ -92,7 +84,7 @@ var SunburstView = ChartView.extend({
                 newNode = null;
             }
 
-            if (newNode !== virtualRoot) {
+            if (newNode !== virtualRoot && oldNode !== virtualRoot) {
                 if (oldNode && oldNode.piece) {
                     if (newNode) {
                         // Update
@@ -125,13 +117,10 @@ var SunburstView = ChartView.extend({
                 group.remove(node.piece);
                 node.piece = null;
             }
-            zrUtil.each(node.children, function (child) {
-                removeNode(child);
-            });
         }
 
         function renderRollUp(virtualRoot, viewRoot) {
-            if (virtualRoot !== viewRoot) {
+            if (viewRoot.depth > 0) {
                 // Render
                 if (virtualRoot.piece) {
                     // Update
@@ -148,9 +137,14 @@ var SunburstView = ChartView.extend({
                     group.add(virtualRoot.piece);
                 }
 
-                virtualRoot.piece.on('click', function (e) {
+                if (viewRoot.piece._onclickEvent) {
+                    viewRoot.piece.off('click', viewRoot.piece._onclickEvent);
+                }
+                var event = function (e) {
                     that._rootToNode(viewRoot.parentNode);
-                });
+                };
+                viewRoot.piece._onclickEvent = event;
+                virtualRoot.piece.on('click', event);
             }
             else if (virtualRoot.piece) {
                 // Remove
@@ -169,7 +163,7 @@ var SunburstView = ChartView.extend({
     _initEvents: function () {
         var that = this;
 
-        this.group.on('click', function (e) {
+        var event = function (e) {
             var nodeClick = that.seriesModel.get('nodeClick', true);
             if (!nodeClick) {
                 return;
@@ -181,7 +175,7 @@ var SunburstView = ChartView.extend({
                 if (!targetFound
                     && node.piece && node.piece.childAt(0) === e.target
                 ) {
-                    if (nodeClick === 'zoomToNode') {
+                    if (nodeClick === 'rootToNode') {
                         that._rootToNode(node);
                     }
                     else if (nodeClick === 'link') {
@@ -196,19 +190,27 @@ var SunburstView = ChartView.extend({
                     targetFound = true;
                 }
             });
-        });
+        };
+
+        if (this.group._onclickEvent) {
+            this.group.off('click', this.group._onclickEvent);
+        }
+        this.group.on('click', event);
+        this.group._onclickEvent = event;
     },
 
     /**
      * @private
      */
     _rootToNode: function (node) {
-        this.api.dispatchAction({
-            type: ROOT_TO_NODE_ACTION,
-            from: this.uid,
-            seriesId: this.seriesModel.id,
-            targetNode: node
-        });
+        if (node !== this.seriesModel.getViewRoot()) {
+            this.api.dispatchAction({
+                type: ROOT_TO_NODE_ACTION,
+                from: this.uid,
+                seriesId: this.seriesModel.id,
+                targetNode: node
+            });
+        }
     },
 
     /**

src/chart/sunburst/sunburstLayout.js

@@ -46,7 +46,7 @@ export default function (seriesType, ecModel, api, payload) {
         // Sum may be 0
         var unitRadian = Math.PI / (sum || validDataCount) * 2;
 
-        var renderRollupNode = treeRoot !== virtualRoot;
+        var renderRollupNode = treeRoot.depth > 0;
         var levels = treeRoot.height - (renderRollupNode ? -1 : 1);
         var rPerLevel = (r - r0) / (levels || 1);
 

src/data/TreeDiff.js

-import * as zrUtil from 'zrender/src/core/util';
-import DataDiff from './DataDiffer';
-
-/**
- * @param {Array} oldArr
- * @param {Array} newArr
- * @param {Function} oldKeyGetter
- * @param {Function} newKeyGetter
- * @param {Object} [context] Can be visited by this.context in callback.
- */
-function TreeDiff(oldArr, newArr, oldKeyGetter, newKeyGetter, context) {
-    DataDiff.apply(this, arguments);
-}
-
-TreeDiff.prototype._initIndexMap = function (
-    arr, map, keyArr, keyGetterName, dataDiffer
-) {
-    for (var i = 0; i < arr.length; i++) {
-        // Add prefix to avoid conflict with Object.prototype.
-        var key = '_ec_' + dataDiffer[keyGetterName](arr[i], i);
-        var existence = map[key];
-        if (existence == null) {
-            map[key] = keyArr.length;
-            keyArr.push(key);
-        }
-        else {
-            if (!existence.length) {
-                map[key] = existence = [existence];
-            }
-            existence.push(i);
-        }
-
-        if (arr[i].children && arr[i].children.length > 0) {
-            this._initIndexMap(
-                arr[i].children, map, keyArr, keyGetterName, dataDiffer
-            );
-        }
-    }
-};
-
-zrUtil.inherits(TreeDiff, DataDiff);
-
-export default TreeDiff;