[graph] focusNodeAdjacency action.

src/chart/graph.js

@@ -6,7 +6,7 @@ define(function (require) {
     require('./graph/GraphSeries');
     require('./graph/GraphView');
 
-    require('./graph/roamAction');
+    require('./graph/graphAction');
 
     echarts.registerProcessor(require('./graph/categoryFilter'));
 

src/chart/graph/GraphView.js

@@ -102,12 +102,25 @@ define(function (require) {
                 }
                 el.setDraggable(draggable && forceLayout);
 
-                el.off('mouseover', this._focusNodeAdjacency);
-                el.off('mouseout', this._unfocusAll);
+                el.off('mouseover', el.__focusNodeAdjacency);
+                el.off('mouseout', el.__unfocusNodeAdjacency);
+
                 if (itemModel.get('focusNodeAdjacency')) {
-                    el.on('mouseover', this._focusNodeAdjacency, this);
-                    el.on('mouseout', this._unfocusAll, this);
+                    el.on('mouseover', el.__focusNodeAdjacency = function () {
+                        api.dispatchAction({
+                            type: 'focusNodeAdjacency',
+                            seriesId: seriesModel.id,
+                            dataIndex: el.dataIndex
+                        });
+                    });
+                    el.on('mouseout', el.__unfocusNodeAdjacency = function () {
+                        api.dispatchAction({
+                            type: 'unfocusNodeAdjacency',
+                            seriesId: seriesModel.id
+                        });
+                    });
                 }
+
             }, this);
 
             var circularRotateLabel = seriesModel.get('layout') === 'circular' && seriesModel.get('circular.rotateLabel');
@@ -146,11 +159,16 @@ define(function (require) {
             this._controller && this._controller.dispose();
         },
 
-        _focusNodeAdjacency: function (e) {
+        focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
             var data = this._model.getData();
+            var dataIndex = payload.dataIndex;
+            var el = data.getItemGraphicEl(dataIndex);
+
+            if (!el) {
+                return;
+            }
+
             var graph = data.graph;
-            var el = e.target;
-            var dataIndex = el.dataIndex;
             var dataType = el.dataType;
 
             function fadeOutItem(item, opacityPath) {
@@ -200,9 +218,8 @@ define(function (require) {
             }
         },
 
-        _unfocusAll: function () {
-            var data = this._model.getData();
-            var graph = data.graph;
+        unfocusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
+            var graph = this._model.getData().graph;
             graph.eachNode(function (node) {
                 var opacity = getItemOpacity(node, nodeOpacityPath);
                 node.getGraphicEl().traverse(function (child) {

src/chart/graph/roamAction.js → src/chart/graph/graphAction.js

@@ -18,7 +18,6 @@ define(function (require) {
      * @property {number} [originX]
      * @property {number} [originY]
      */
-
     echarts.registerAction(actionInfo, function (payload, ecModel) {
         ecModel.eachComponent({mainType: 'series', query: payload}, function (seriesModel) {
             var coordSys = seriesModel.coordinateSystem;
@@ -32,4 +31,31 @@ define(function (require) {
                 && seriesModel.setZoom(res.zoom);
         });
     });
+
+
+    /**
+     * @payload
+     * @property {number} [seriesIndex]
+     * @property {string} [seriesId]
+     * @property {string} [seriesName]
+     * @property {number} [dataIndex]
+     */
+    echarts.registerAction({
+        type: 'focusNodeAdjacency',
+        event: 'focusNodeAdjacency',
+        update: 'series.graph:focusNodeAdjacency'
+    }, function () {});
+
+    /**
+     * @payload
+     * @property {number} [seriesIndex]
+     * @property {string} [seriesId]
+     * @property {string} [seriesName]
+     */
+    echarts.registerAction({
+        type: 'unfocusNodeAdjacency',
+        event: 'unfocusNodeAdjacency',
+        update: 'series.graph:unfocusNodeAdjacency'
+    }, function () {});
+
 });
\ No newline at end of file

src/echarts.js

@@ -773,24 +773,29 @@ define(function (require) {
     /**
      * @private
      */
-    function updateDirectly(method, payload, mainType, subType) {
-        var ecModel = this._model;
-
-        // dispatchAction before setOption
-        if (!ecModel) {
-            return;
+    function updateDirectly(ecIns, method, payload, mainType, subType, restrict) {
+        var ecModel = ecIns._model;
+        var query;
+
+        if (restrict) {
+            query = {};
+            query[mainType + 'Id'] = payload[mainType + 'Id'];
+            query[mainType + 'Index'] = payload[mainType + 'Index'];
+            query[mainType + 'Name'] = payload[mainType + 'Name'];
         }
 
-        var condition = {mainType: mainType, query: payload};
+        var condition = {mainType: mainType, query: query};
         subType && (condition.subType = subType); // subType may be '' by parseClassType;
-        ecModel.eachComponent(condition, function (model, index) {
-            var view = this[
+
+        // If dispatchAction before setOption, do nothing.
+        ecModel && ecModel.eachComponent(condition, function (model, index) {
+            var view = ecIns[
                 mainType === 'series' ? '_chartsMap' : '_componentsMap'
             ][model.__viewId];
             if (view && view.__alive) {
-                view[method](model, ecModel, this._api, payload);
+                view[method](model, ecModel, ecIns._api, payload);
             }
-        }, this);
+        }, ecIns);
     }
 
     /**
@@ -920,9 +925,9 @@ define(function (require) {
         var actionWrap = actions[payloadType];
         var actionInfo = actionWrap.actionInfo;
 
-        var componentType = (actionInfo.update || 'update').split(':');
-        var updateMethod = componentType.pop();
-        componentType = componentType[0] && parseClassType(componentType[0]);
+        var cptType = (actionInfo.update || 'update').split(':');
+        var updateMethod = cptType.pop();
+        cptType = cptType[0] && parseClassType(cptType[0]);
 
         this[IN_MAIN_PROCESS] = true;
 
@@ -955,14 +960,14 @@ define(function (require) {
             // light update does not perform data process, layout and visual.
             if (isHighDown) {
                 // method, payload, mainType, subType
-                updateDirectly.call(this, updateMethod, batchItem, 'series');
+                updateDirectly(this, updateMethod, batchItem, 'series');
             }
-            else if (componentType) {
-                updateDirectly.call(this, updateMethod, batchItem, componentType.main, componentType.sub);
+            else if (cptType) {
+                updateDirectly(this, updateMethod, batchItem, cptType.main, cptType.sub, true);
             }
         }
 
-        if (updateMethod !== 'none' && !isHighDown && !componentType) {
+        if (updateMethod !== 'none' && !isHighDown && !cptType) {
             // Still dirty
             if (this[OPTION_UPDATED]) {
                 // FIXME Pass payload ?

src/model/Global.js

@@ -383,9 +383,9 @@ define(function (require) {
                 var idAttr = mainType + 'Id';
                 var nameAttr = mainType + 'Name';
                 return q && (
-                        q.hasOwnProperty(indexAttr)
-                        || q.hasOwnProperty(idAttr)
-                        || q.hasOwnProperty(nameAttr)
+                        q[indexAttr] != null
+                        || q[idAttr] != null
+                        || q[nameAttr] != null
                     )
                     ? {
                         mainType: mainType,

test/graph.html

@@ -114,7 +114,21 @@
                     chart.setOption(option);
 
                     var config = {
-                        layout: 'none'
+                        layout: 'none',
+                        focusNodeAdjacency: true,
+                        manualFocusNodeAdjacency: function () {
+                            chart.dispatchAction({
+                                type: 'focusNodeAdjacency',
+                                seriesName: 'Les Miserables',
+                                dataIndex: 2
+                            });
+                        },
+                        manualUnfocusNodeAdjacency: function () {
+                            chart.dispatchAction({
+                                type: 'unfocusNodeAdjacency',
+                                seriesName: 'Les Miserables'
+                            });
+                        }
                     };
 
                     chart.on('click', function (params) {
@@ -131,6 +145,17 @@
                                 }]
                             });
                         });
+                    gui.add(config, 'focusNodeAdjacency')
+                        .onChange(function (value) {
+                            chart.setOption({
+                                series: [{
+                                    name: 'Les Miserables',
+                                    focusNodeAdjacency: value
+                                }]
+                            });
+                        });
+                    gui.add(config, 'manualFocusNodeAdjacency');
+                    gui.add(config, 'manualUnfocusNodeAdjacency');
                 });
             });
         </script>