Merge branch 'master' of https://github.com/ecomfe/echarts

src/chart/graph/GraphSeries.js

@@ -168,6 +168,8 @@ define(function (require) {
 
             layout: null,
 
+            focusNodeAdjacency: false,
+
             // Configuration of force
             force: {
                 initLayout: null,

src/chart/graph/GraphView.js

@@ -7,6 +7,14 @@ define(function (require) {
 
     var graphic = require('../../util/graphic');
     var adjustEdge = require('./adjustEdge');
+    var zrUtil = require('zrender/core/util');
+
+    var nodeOpacityPath = ['itemStyle', 'normal', 'opacity'];
+    var lineOpacityPath = ['lineStyle', 'normal', 'opacity'];
+
+    function getItemOpacity(item, opacityPath) {
+        return item.getVisual('opacity') || item.getModel().get(opacityPath);
+    }
 
     require('../../echarts').extendChartView({
 
@@ -31,10 +39,6 @@ define(function (require) {
 
         render: function (seriesModel, ecModel, api) {
             var coordSys = seriesModel.coordinateSystem;
-            // Only support view and geo coordinate system
-            // if (coordSys.type !== 'geo' && coordSys.type !== 'view') {
-            //     return;
-            // }
 
             this._model = seriesModel;
             this._nodeScaleRatio = seriesModel.get('nodeScaleRatio');
@@ -76,8 +80,10 @@ define(function (require) {
             if (forceLayout) {
                 this._startForceLayoutIteration(forceLayout, layoutAnimation);
             }
-            // Update draggable
             data.eachItemGraphicEl(function (el, idx) {
+                var itemModel = data.getItemModel(idx);
+                // Update draggable
+                el.off('drag').off('dragend');
                 var draggable = data.getItemModel(idx).get('draggable');
                 if (draggable) {
                     el.on('drag', function () {
@@ -95,15 +101,95 @@ define(function (require) {
                         }
                     }, this);
                 }
-                else {
-                    el.off('drag');
-                }
                 el.setDraggable(draggable && forceLayout);
+
+                el.off('mouseover', this._focusNodeAdjacency);
+                el.off('mouseout', this._unfocusAll);
+                if (itemModel.get('focusNodeAdjacency')) {
+                    el.on('mouseover', this._focusNodeAdjacency, this);
+                    el.on('mouseout', this._unfocusAll, this);
+                }
             }, this);
 
             this._firstRender = false;
         },
 
+        _focusNodeAdjacency: function (e) {
+            var data = this._model.getData();
+            var graph = data.graph;
+            var el = e.target;
+            var dataIndex = el.dataIndex;
+            var dataType = el.dataType;
+
+            function fadeOutItem(item, opacityPath) {
+                var opacity = getItemOpacity(item, opacityPath);
+                var el = item.getGraphicEl();
+                if (opacity == null) {
+                    opacity = 1;
+                }
+
+                el.traverse(function (child) {
+                    child.trigger('normal');
+                    if (child.type !== 'group') {
+                        child.setStyle('opacity', opacity * 0.1);
+                    }
+                });
+            }
+
+            function fadeInItem(item, opacityPath) {
+                var opacity = getItemOpacity(item, opacityPath);
+                var el = item.getGraphicEl();
+
+                el.traverse(function (child) {
+                    child.trigger('emphasis');
+                    if (child.type !== 'group') {
+                        child.setStyle('opacity', opacity);
+                    }
+                });
+            }
+            if (dataIndex !== null && dataType !== 'edge') {
+                graph.eachNode(function (node) {
+                    fadeOutItem(node, nodeOpacityPath);
+                });
+                graph.eachEdge(function (edge) {
+                    fadeOutItem(edge, lineOpacityPath);
+                });
+
+                var node = graph.getNodeByIndex(dataIndex);
+                zrUtil.each(node.edges, function (edge) {
+                    if (edge.dataIndex < 0) {
+                        return;
+                    }
+                    fadeInItem(edge, lineOpacityPath);
+                    fadeInItem(edge.node1, nodeOpacityPath);
+                    fadeInItem(edge.node2, nodeOpacityPath);
+                });
+            }
+        },
+
+        _unfocusAll: function () {
+            var data = this._model.getData();
+            var graph = data.graph;
+            graph.eachNode(function (node) {
+                var opacity = getItemOpacity(node, nodeOpacityPath);
+                node.getGraphicEl().traverse(function (child) {
+                    child.trigger('normal');
+                    if (child.type !== 'group') {
+                        child.setStyle('opacity', opacity);
+                    }
+                });
+            });
+            graph.eachEdge(function (edge) {
+                var opacity = getItemOpacity(edge, lineOpacityPath);
+                edge.getGraphicEl().traverse(function (child) {
+                    child.trigger('normal');
+                    if (child.type !== 'group') {
+                        child.setStyle('opacity', opacity);
+                    }
+                });
+            });
+        },
+
         _startForceLayoutIteration: function (forceLayout, layoutAnimation) {
             var self = this;
             (function step() {
@@ -180,7 +266,7 @@ define(function (require) {
 
             var nodeScaleRatio = this._nodeScaleRatio;
 
-            var groupScale = this.group.scale;
+            var groupScale = coordSys.scale;
             var groupZoom = (groupScale && groupScale[0]) || 1;
             // Scale node when zoom changes
             var roamZoom = coordSys.getZoom();

src/chart/helper/Symbol.js

@@ -116,6 +116,8 @@ define(function (require) {
      * @param  {number} idx
      */
     symbolProto.updateData = function (data, idx) {
+        this.silent = false;
+
         var symbolType = data.getItemVisual(idx, 'symbol') || 'circle';
         var seriesModel = data.hostModel;
         var symbolSize = normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize'));
@@ -141,6 +143,7 @@ define(function (require) {
 
     symbolProto._updateCommon = function (data, idx, symbolSize) {
         var symbolPath = this.childAt(0);
+
         var seriesModel = data.hostModel;
         var itemModel = data.getItemModel(idx);
         var normalItemStyleModel = itemModel.getModel(normalStyleAccessPath);
@@ -247,11 +250,8 @@ define(function (require) {
 
     symbolProto.fadeOut = function (cb) {
         var symbolPath = this.childAt(0);
-        // Avoid trigger hoverAnimation when fading
-        symbolPath.off('mouseover')
-            .off('mouseout')
-            .off('emphasis')
-            .off('normal');
+        // Avoid mistaken hover when fading out
+        this.silent = true;
         // Not show text when animating
         symbolPath.style.text = '';
         graphic.updateProps(symbolPath, {