Graph support cartesian2d, polar, geo coordinate systems

src/chart/graph/GraphSeries.js

@@ -42,8 +42,8 @@ define(function (require) {
         },
 
         getInitialData: function (option, ecModel) {
-            var edges = option.edges || option.links;
-            var nodes = option.data || option.nodes;
+            var edges = option.edges || option.links || [];
+            var nodes = option.data || option.nodes || [];
 
             if (nodes && edges) {
                 var graph = createGraphFromNodeEdge(nodes, edges, this, true);
@@ -170,6 +170,12 @@ define(function (require) {
 
             coordinateSystem: 'view',
 
+            // Default option for all coordinate systems
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            polarIndex: 0,
+            geoIndex: 0,
+
             legendHoverLink: true,
 
             hoverAnimation: true,

src/chart/graph/GraphView.js

@@ -32,9 +32,9 @@ 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;
-            }
+            // if (coordSys.type !== 'geo' && coordSys.type !== 'view') {
+            //     return;
+            // }
 
             this._model = seriesModel;
             this._nodeScaleRatio = seriesModel.get('nodeScaleRatio');
@@ -129,6 +129,10 @@ define(function (require) {
                 rect.applyTransform(group.transform);
                 return rect;
             };
+            if (seriesModel.coordinateSystem.type !== 'view') {
+                controller.disable();
+                return;
+            }
             controller.enable(seriesModel.get('roam'));
             controller.zoomLimit = seriesModel.get('scaleLimit');
             // Update zoom from model
@@ -173,6 +177,9 @@ define(function (require) {
 
         _getNodeGlobalScale: function (seriesModel) {
             var coordSys = seriesModel.coordinateSystem;
+            if (coordSys.type !== 'view') {
+                return 1;
+            }
 
             var nodeScaleRatio = this._nodeScaleRatio;
 

src/chart/graph/forceLayout.js

@@ -8,6 +8,10 @@ define(function (require) {
 
     return function (ecModel, api) {
         ecModel.eachSeriesByType('graph', function (graphSeries) {
+            var coordSys = graphSeries.coordinateSystem;
+            if (coordSys && coordSys.type !== 'view') {
+                return;
+            }
             if (graphSeries.get('layout') === 'force') {
                 var preservedPoints = graphSeries.preservedPoints || {};
                 var graph = graphSeries.getGraph();

src/chart/graph/simpleLayout.js

 define(function (require) {
 
     var simpleLayoutHelper = require('./simpleLayoutHelper');
+    var simpleLayoutEdge = require('./simpleLayoutEdge');
     return function (ecModel, api) {
         ecModel.eachSeriesByType('graph', function (seriesModel) {
             var layout = seriesModel.get('layout');
-            if (!layout || layout === 'none') {
+            var coordSys = seriesModel.coordinateSystem;
+            if (coordSys && coordSys.type !== 'view') {
+                var data = seriesModel.getData();
+                data.each(coordSys.dimensions, function (x, y, idx) {
+                    if (!isNaN(x) && !isNaN(y)) {
+                        data.setItemLayout(idx, coordSys.dataToPoint([x, y]));
+                    }
+                    else {
+                        // Also {Array.<number>}, not undefined to avoid if...else... statement
+                        data.setItemLayout(idx, [NaN, NaN]);
+                    }
+                });
+
+                simpleLayoutEdge(data.graph);
+            }
+            else if (!layout || layout === 'none') {
                 simpleLayoutHelper(seriesModel);
             }
         });

src/chart/graph/simpleLayoutEdge.js

+define(function (require) {
+    return function (graph) {
+        graph.eachEdge(function (edge) {
+            var curveness = edge.getModel().get('lineStyle.normal.curveness') || 0;
+            var p1 = edge.node1.getLayout().slice();
+            var p2 = edge.node2.getLayout().slice();
+            var points = [p1, p2];
+            if (curveness > 0) {
+                points.push([
+                    (p1[0] + p2[0]) / 2 - (p1[1] - p2[1]) * curveness,
+                    (p1[1] + p2[1]) / 2 - (p2[0] - p1[0]) * curveness
+                ]);
+            }
+            edge.setLayout(points);
+        });
+    };
+});
\ No newline at end of file

src/chart/graph/simpleLayoutHelper.js

 define(function (require) {
+
+    var simpleLayoutEdge = require('./simpleLayoutEdge');
+
     return function (seriesModel) {
         var coordSys = seriesModel.coordinateSystem;
         if (coordSys && coordSys.type !== 'view') {
@@ -11,18 +14,6 @@ define(function (require) {
             node.setLayout([+model.get('x'), +model.get('y')]);
         });
 
-        graph.eachEdge(function (edge) {
-            var curveness = edge.getModel().get('lineStyle.normal.curveness') || 0;
-            var p1 = edge.node1.getLayout().slice();
-            var p2 = edge.node2.getLayout().slice();
-            var points = [p1, p2];
-            if (curveness > 0) {
-                points.push([
-                    (p1[0] + p2[0]) / 2 - (p1[1] - p2[1]) * curveness,
-                    (p1[1] + p2[1]) / 2 - (p2[0] - p1[0]) * curveness
-                ]);
-            }
-            edge.setLayout(points);
-        });
+        simpleLayoutEdge(graph);
     };
 });
\ No newline at end of file

src/chart/helper/createGraphFromNodeEdge.js

@@ -4,7 +4,9 @@ define(function (require) {
     var Graph = require('../../data/Graph');
     var linkList = require('../../data/helper/linkList');
     var completeDimensions = require('../../data/helper/completeDimensions');
+    var CoordinateSystem = require('../../CoordinateSystem');
     var zrUtil = require('zrender/core/util');
+    var createListFromArray = require('./createListFromArray');
 
     return function (nodes, edges, hostModel, directed) {
         var graph = new Graph(directed);
@@ -19,20 +21,33 @@ define(function (require) {
         var validEdges = [];
         for (var i = 0; i < edges.length; i++) {
             var link = edges[i];
+            var source = link.source;
+            var target = link.target;
             // addEdge may fail when source or target not exists
-            if (graph.addEdge(link.source, link.target, i)) {
+            if (graph.addEdge(source, target, i)) {
                 validEdges.push(link);
-                linkNameList.push(zrUtil.retrieve(link.id, link.source + ' - ' + link.target));
+                linkNameList.push(zrUtil.retrieve(link.id, source + ' > ' + target));
             }
         }
 
-        // FIXME
-        var dimensionNames = completeDimensions(['value'], nodes);
+        var coordSys = hostModel.get('coordinateSystem');
+        var nodeData;
+        if (coordSys === 'cartesian2d' || coordSys === 'polar') {
+            nodeData = createListFromArray(nodes, hostModel, hostModel.ecModel);
+        }
+        else {
+            // FIXME
+            var coordSysCtor = CoordinateSystem.get();
+            // FIXME
+            var dimensionNames = completeDimensions(
+                ((coordSysCtor && coordSysCtor.type !== 'view') ? (coordSysCtor.dimensions || []) : []).concat(['value']),
+                nodes
+            );
+            nodeData = new List(dimensionNames, hostModel);
+            nodeData.initData(nodes);
+        }
 
-        var nodeData = new List(dimensionNames, hostModel);
         var edgeData = new List(['value'], hostModel);
-
-        nodeData.initData(nodes);
         edgeData.initData(validEdges, linkNameList);
 
         graph.setEdgeData(edgeData);

src/chart/helper/createGraphFromNodeMatrix.js

@@ -4,7 +4,9 @@ define(function (require) {
     var Graph = require('../../data/Graph');
     var linkList = require('../../data/helper/linkList');
     var completeDimensions = require('../../data/helper/completeDimensions');
+    var CoordinateSystem = require('../../CoordinateSystem');
     var zrUtil = require('zrender/core/util');
+    var createListFromArray = require('./createListFromArray');
 
     /**
      * 从邻接矩阵生成
@@ -54,13 +56,24 @@ define(function (require) {
             }
         }
 
-        // FIXME
-        var dimensionNames = completeDimensions(['value'], nodes);
-
-        var nodeData = new List(dimensionNames, hostModel);
+        var coordSys = hostModel.get('coordinateSystem');
+        var nodeData;
+        if (coordSys === 'cartesian2d' || coordSys === 'polar') {
+            nodeData = createListFromArray(nodes, hostModel, hostModel.ecModel);
+        }
+        else {
+            // FIXME
+            var coordSysCtor = CoordinateSystem.get();
+            // FIXME
+            var dimensionNames = completeDimensions(
+                (coordSysCtor && coordSysCtor.type !== 'view' ? [] : (coordSysCtor.dimensions || [])).concat(['value']),
+                nodes
+            );
+            nodeData = new List(dimensionNames, hostModel);
+            nodeData.initData(nodes);
+        }
         var edgeData = new List(['value'], hostModel);
 
-        nodeData.initData(nodes);
         edgeData.initData(links);
 
         graph.setEdgeData(edgeData);

src/chart/map/backwardCompat.js

@@ -2,7 +2,7 @@ define(function (require) {
 
     var zrUtil = require('zrender/core/util');
     var geoProps = [
-        'x', 'y', 'x2', 'y2', 'width', 'height', 'map', 'roam', 'center', 'zoom', 'label', 'itemStyle'
+        'x', 'y', 'x2', 'y2', 'width', 'height', 'map', 'roam', 'center', 'zoom', 'scaleLimit', 'label', 'itemStyle'
     ];
 
     var geoCoordsMap = {};

src/data/Graph.js

@@ -79,6 +79,8 @@ define(function(require) {
      * @param {number} [dataIndex]
      */
     graphProto.addNode = function (id, dataIndex) {
+        id = id || ('' + dataIndex);
+
         var nodesMap = this._nodesMap;
 
         if (nodesMap[id]) {
@@ -114,8 +116,8 @@ define(function(require) {
 
     /**
      * Add a new edge
-     * @param {string|module:echarts/data/Graph.Node} n1
-     * @param {string|module:echarts/data/Graph.Node} n2
+     * @param {number|string|module:echarts/data/Graph.Node} n1
+     * @param {number|string|module:echarts/data/Graph.Node} n2
      * @param {number} [dataIndex=-1]
      * @return {module:echarts/data/Graph.Edge}
      */
@@ -123,6 +125,14 @@ define(function(require) {
         var nodesMap = this._nodesMap;
         var edgesMap = this._edgesMap;
 
+        // PNEDING
+        if (typeof n1 === 'number') {
+            n1 = this.nodes[n1];
+        }
+        if (typeof n2 === 'number') {
+            n2 = this.nodes[n2];
+        }
+
         if (!(n1 instanceof Node)) {
             n1 = nodesMap[n1];
         }

src/layout/points.js

@@ -5,19 +5,21 @@ define(function (require) {
             var data = seriesModel.getData();
             var coordSys = seriesModel.coordinateSystem;
 
-            var dims = coordSys.dimensions;
-            data.each(dims, function (x, y, idx) {
-                var point;
-                if (!isNaN(x) && !isNaN(y)) {
-                    point = coordSys.dataToPoint([x, y]);
-                }
-                else {
-                    // Also {Array.<number>}, not undefined to avoid if...else... statement
-                    point = [NaN, NaN];
-                }
+            if (coordSys) {
+                var dims = coordSys.dimensions;
+                data.each(dims, function (x, y, idx) {
+                    var point;
+                    if (!isNaN(x) && !isNaN(y)) {
+                        point = coordSys.dataToPoint([x, y]);
+                    }
+                    else {
+                        // Also {Array.<number>}, not undefined to avoid if...else... statement
+                        point = [NaN, NaN];
+                    }
 
-                data.setItemLayout(idx, point);
-            }, true);
+                    data.setItemLayout(idx, point);
+                }, true);
+            }
         });
     };
 });
\ No newline at end of file

test/graph-grid.html

+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts',
+                'echarts/component/grid',
+                'echarts/chart/graph',
+                'echarts/component/title',
+                'echarts/component/legend',
+                'echarts/component/tooltip',
+                'zrender/vml/vml',
+
+                'theme/vintage'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'), 'vintage');
+
+
+                var axisData = ['周一','周二','周三','周四','周五','周六','周日'];
+                var data = axisData.map(function (item, i) {
+                    return Math.round(Math.random() * 1000 * (i + 1));
+                });
+                var links = data.map(function (item, i) {
+                    return {
+                        source: i,
+                        target: i + 1
+                    };
+                });
+                links.pop();
+                var option = {
+                    tooltip: {},
+                    xAxis: {
+                        type : 'category',
+                        boundaryGap : false,
+                        data : axisData
+                    },
+                    yAxis: {
+                        type : 'value'
+                    },
+                    series: [
+                        {
+                            type: 'graph',
+                            layout: 'none',
+                            coordinateSystem: 'cartesian2d',
+                            symbolSize: 40,
+                            label: {
+                                normal: {
+                                    show: true
+                                }
+                            },
+                            edgeSymbol: ['circle', 'arrow'],
+                            edgeSymbolSize: [4, 10],
+                            data: data,
+                            links: links
+                        }
+                    ]
+                };
+
+                chart.setOption(option);
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file

test/graph-simple.html

@@ -4,7 +4,6 @@
         <script src="esl.js"></script>
         <script src="config.js"></script>
         <script src="lib/jquery.min.js"></script>
-        <script src="lib/dat.gui.min.js"></script>
     </head>
     <body>
         <style>
@@ -19,19 +18,14 @@
 
             require([
                 'echarts',
-
-                'extension/dataTool/gexf',
-
                 'echarts/chart/graph',
-
                 'echarts/component/title',
                 'echarts/component/legend',
-                'echarts/component/geo',
                 'echarts/component/tooltip',
-                'echarts/component/visualMap',
+                'zrender/vml/vml',
 
                 'theme/vintage'
-            ], function (echarts, gexf) {
+            ], function (echarts) {
 
                 var chart = echarts.init(document.getElementById('main'), 'vintage');
 
@@ -45,7 +39,13 @@
                             layout: 'none',
                             symbolSize: 50,
                             roam: true,
-                            edgeSymbol: ['none', 'arrow'],
+                            label: {
+                                normal: {
+                                    show: true
+                                }
+                            },
+                            edgeSymbol: ['circle', 'arrow'],
+                            edgeSymbolSize: [4, 10],
                             edgeLabel: {
                                 normal: {
                                     textStyle: {
@@ -72,9 +72,9 @@
                             }],
                             // links: [],
                             links: [{
-                                source: '节点1',
-                                target: '节点2',
-                                symbolSize: 20,
+                                source: 0,
+                                target: 1,
+                                symbolSize: [5, 20],
                                 label: {
                                     normal: {
                                         show: true