Graph add focusNodeAdjacency

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,88 @@ define(function (require) {
                         }
                     }, this);
                 }
-                else {
-                    el.off('drag');
-                }
                 el.setDraggable(draggable && forceLayout);
+
+                el.off('mouseover', this._focusNodeAdjacency);
+                el.off('mouseout', this._unfocusNodeAdjacency);
+                if (itemModel.get('focusNodeAdjacency')) {
+                    el.on('mouseover', this._focusNodeAdjacency, this);
+                    el.on('mouseout', this._unfocusNodeAdjacency, 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 fadeOut(child) {
+                if (child.type !== 'group') {
+                    child.setStyle('opacity', 0.2);
+                }
+            }
+
+            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) {
+                    var el = node.getGraphicEl();
+                    el.traverse(fadeOut);
+                });
+                graph.eachEdge(function (edge) {
+                    var el = edge.getGraphicEl();
+                    el.traverse(fadeOut);
+                });
+
+                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);
+                });
+            }
+        },
+
+        _unfocusNodeAdjacency: 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() {