Add graph chart, View coordinate system

src/chart/graph.js

+define(function (require) {
+
+    var echarts = require('../echarts');
+    var zrUtil = require('zrender/core/util');
+
+    require('./graph/GraphSeries');
+    require('./graph/GraphView');
+
+    echarts.registerVisualCoding('chart', zrUtil.curry(
+        require('../visual/symbol'), 'graph', 'circle', null
+    ));
+
+    echarts.registerLayout(require('./graph/simpleLayout'));
+});
\ No newline at end of file

src/chart/graph/GraphSeries.js

+define(function (require) {
+
+    'use strict';
+
+    var SeriesModel = require('../../model/Series');
+
+    var createGraphNodeLinks = require('../helper/createGraphFromNodeLinks');
+
+    return SeriesModel.extend({
+
+        type: 'series.graph',
+
+        getInitialData: function (option, ecModel) {
+            if (option.data && option.links) {
+                var graph = createGraphNodeLinks(
+                    option.data, option.links, this, true
+                );
+                return graph.data;
+            }
+        },
+
+        defaultOption: {
+            zlevel: 0,
+            z: 2,
+            
+            coordinateSystem: 'view',
+
+            layout: null,
+
+            x: 'center',
+            y: 'center',
+            x2: null,
+            y2: null,
+            width: '80%',
+            height: '80%',
+
+            symbol: 'circle',
+            symbolSize: 10,
+
+            label: {
+                normal: {
+                    show: false
+                },
+                emphasis: {
+                    show: false
+                }
+            },
+
+            itemStyle: {
+                normal: {
+                },
+                emphasis: {
+                }
+            },
+
+            linkStyle: {
+                normal: {
+                    color: '#5182ab',
+                    curveness: 0
+                },
+                emphasis: {
+
+                }
+            }
+        }
+   });
+
+});
\ No newline at end of file

src/chart/graph/GraphView.js

+define(function (require) {
+
+    var DataSymbol = require('../helper/DataSymbol');
+
+    require('../../echarts').extendChartView({
+
+        type: 'graph',
+
+        init: function () {
+            var dataSymbol = new DataSymbol();
+            this.group.add(dataSymbol.group);
+
+            this._dataSymbol = dataSymbol;
+        },
+
+        render: function (seriesModel, ecModel, api) {
+            var data = seriesModel.getData();
+
+            this._dataSymbol.updateData(
+                data, seriesModel, api, false
+            );
+        },
+
+        remove: function (ecModel, api) {
+
+        }
+    });
+});
\ No newline at end of file

src/chart/graph/simpleLayout.js

+define(function (require) {
+
+    // FIXME Where to create the simple view layout
+    var View = require('../../coord/View');
+    var bbox = require('zrender/core/bbox');
+    var layout = require('../../util/layout');
+
+    function getViewRect(seriesModel, api) {
+        return layout.parsePositionInfo({
+            x: seriesModel.get('x'),
+            y: seriesModel.get('y'),
+            x2: seriesModel.get('x2'),
+            y2: seriesModel.get('y2'),
+            width: seriesModel.get('width'),
+            height: seriesModel.get('height')
+        }, {
+            width: api.getWidth(),
+            height: api.getHeight()
+        });
+    }
+
+    return function (ecModel, api) {
+        ecModel.eachSeriesByType('graph', function (seriesModel) {
+            var layout = seriesModel.get('layout');
+            if (!layout || layout === 'none') {
+                var coordSys = seriesModel.coordinateSystem = seriesModel.coordinateSystem || new View();
+                var viewRect = getViewRect(seriesModel, api);
+                var graph = seriesModel.getData().graph;
+                var positions = graph.data.mapArray(function (idx) {
+                    var itemModel = graph.data.getItemModel(idx);
+                    return [+itemModel.get('x'), +itemModel.get('y')];
+                });
+                var min = [];
+                var max = [];
+
+                bbox.fromPoints(positions, min, max);
+
+                coordSys.setBoundingRect(
+                    min[0], min[1], max[0] - min[0], max[1] - min[1]
+                );
+
+                coordSys.setViewRect(
+                    viewRect.x, viewRect.y, viewRect.width, viewRect.height
+                );
+
+                graph.eachNode(function (node) {
+                    node.setLayout(
+                        coordSys.dataToPoint(positions[node.dataIndex])
+                    );
+                });
+            }
+        });
+    };
+});
\ No newline at end of file

src/chart/helper/createGraphFromNodeLinks.js

+define(function (require) {
+
+    var List = require('../../data/List');
+    var Graph = require('../../data/Graph');
+    var linkList = require('../../data/helper/linkList');
+    var zrUtil = require('zrender/core/util');
+
+    return function (nodes, links, hostModel, directed) {
+        var graph = new Graph(directed);
+        for (var i = 0; i < nodes.length; i++) {
+            graph.addNode(nodes[i].name, i);
+        }
+        for (var i = 0; i < links.length; i++) {
+            var link = links[i];
+            graph.addEdge(link.source, link.target, i);
+        }
+
+        // FIXME
+        var firstValue = nodes[0] && nodes[0].value;
+        var dimSize = zrUtil.isArray(firstValue) ? firstValue.length : 1;
+        var dimensionNames = ['value', 'a', 'b', 'c', 'd', 'e', 'f'].slice(0, dimSize);
+        var nodeData = new List(dimensionNames, hostModel);
+        nodeData.initData(nodes);
+
+        linkList.linkToGraph(nodeData, graph);
+
+        return graph;
+    };
+});
\ No newline at end of file

src/chart/pie/PieSeries.js

@@ -43,7 +43,6 @@ define(function(require) {
         defaultOption: {
             zlevel: 0,
             z: 2,
-            clickable: true,
             legendHoverLink: true,
             // 默认全局居中
             center: ['50%', '50%'],

src/component/helper/MapDraw.js

@@ -260,7 +260,7 @@ define(function (require) {
                     }
                 }, this);
 
-            controller.rect = geo.getViewBox();
+            controller.rect = geo.getViewRect();
         }
     }
 

src/coord/View.js

+/**
+ * Simple view coordinate system
+ * Mapping given x, y to transformd view x, y
+ */
+define(function (require) {
+
+    var vector = require('zrender/core/vector');
+    var matrix = require('zrender/core/matrix');
+
+    var Transformable = require('zrender/mixin/Transformable');
+    var zrUtil = require('zrender/core/util');
+
+    var BoundingRect = require('zrender/core/BoundingRect');
+
+    var v2Copy = vector.copy;
+
+    // Dummy transform node
+    function TransformDummy() {
+        Transformable.call(this);
+    }
+    zrUtil.mixin(TransformDummy, Transformable);
+
+    function View(name) {
+        /**
+         * @type {string}
+         */
+        this.name = name;
+
+        /**
+         * @param {Array.<string>}
+         * @readOnly
+         */
+        this.dimensions = ['x', 'y'];
+
+        Transformable.call(this);
+
+        this._roamTransform = new TransformDummy();
+
+        this._viewTransform = new TransformDummy();
+    };
+
+    View.prototype = {
+
+        constructor: View,
+
+        type: 'view',
+
+        /**
+         * Set bounding rect
+         * @param {number} x
+         * @param {number} y
+         * @param {number} width
+         * @param {number} height
+         */
+        setBoundingRect: function (x, y, width, height) {
+            this._rect = new BoundingRect(x, y, width, height);
+            return this._rect;
+        },
+
+        /**
+         * @return {module:zrender/core/BoundingRect}
+         */
+        getBoundingRect: function () {
+            return this._rect;
+        },
+
+        /**
+         * @param {number} x
+         * @param {number} y
+         * @param {number} width
+         * @param {number} height
+         */
+        setViewRect: function (x, y, width, height) {
+            this.transformTo(x, y, width, height);
+            this._viewRect = new BoundingRect(x, y, width, height);
+        },
+
+        /**
+         * Transformed to particular position and size
+         * @param {number} x
+         * @param {number} y
+         * @param {number} width
+         * @param {number} height
+         */
+        transformTo: function (x, y, width, height) {
+            var rect = this.getBoundingRect();
+
+            rect = rect.clone();
+            // Longitute is inverted
+            rect.y = -rect.y - rect.height;
+
+            this.transform = rect.calculateTransform(
+                new BoundingRect(x, y, width, height)
+            );
+
+            this.decomposeTransform();
+
+            var scale = this.scale;
+            var viewTransform = this._viewTransform;
+
+            scale[1] = -scale[1];
+
+            v2Copy(viewTransform.position, this.position);
+            v2Copy(viewTransform.scale, scale);
+
+            this._updateTransform();
+        },
+
+        /**
+         * @param {number} x
+         * @param {number} y
+         */
+        setPan: function (x, y) {
+
+            this._roamTransform.position = [x, y];
+
+            this._updateTransform();
+        },
+
+        /**
+         * @param {number} zoom
+         */
+        setZoom: function (zoom) {
+            this._roamTransform.scale = [zoom, zoom];
+
+            this._updateTransform();
+        },
+
+        /**
+         * Update transform from roam and mapLocation
+         * @private
+         */
+        _updateTransform: function () {
+            var roamTransform = this._roamTransform;
+            var viewTransform = this._viewTransform;
+            var scale = this.scale;
+
+            viewTransform.parent = roamTransform;
+            roamTransform.updateTransform();
+            viewTransform.updateTransform();
+
+            viewTransform.transform
+                && matrix.copy(this.transform, viewTransform.transform);
+
+            this.decomposeTransform();
+
+            scale[1] = -scale[1];
+
+            // Update transform position
+
+            this.updateTransform();
+        },
+
+        /**
+         * @return {module:zrender/core/BoundingRect}
+         */
+        getViewRect: function () {
+            return this._viewRect;
+        },
+
+        /**
+         * Convert a single (lon, lat) data item to (x, y) point.
+         * @param {Array.<number>} data
+         * @return {Array.<number>}
+         */
+        dataToPoint: function (data) {
+            var transform = this.transform;
+            return transform
+                ? vector.applyTransform([], data, this.transform)
+                : data.slice();
+        },
+
+        /**
+         * Convert a (x, y) point to (lon, lat) data
+         * @param {Array.<number>} point
+         * @return {Array.<number>}
+         */
+        pointToData: function (point) {
+            var invTransform = this.invTransform;
+            return invTransform
+                ? vector.applyTransform([], point, invTransform)
+                : point.slice();
+        }
+    };
+
+    zrUtil.mixin(View, Transformable);
+
+    return View;
+});
\ No newline at end of file

src/coord/cartesian/Grid.js

@@ -5,13 +5,14 @@
  */
 define(function(require, factory) {
 
+    var layout = require('../../util/layout');
+
     var OrdinalScale = require('../../scale/Ordinal');
     var IntervalScale = require('../../scale/Interval');
 
     var zrUtil = require('zrender/core/util');
     var Cartesian2D = require('./Cartesian2D');
     var Axis2D = require('./Axis2D');
-    var numberUtil = require('../../util/number');
 
     var scaleClasses = require('../../scale/scale');
 
@@ -75,12 +76,13 @@ define(function(require, factory) {
      * @inner
      */
     function niceScaleExent(axis, model) {
-        if (axis.scale.type === 'ordinal') {
+        var scale = axis.scale;
+        if (scale.type === 'ordinal') {
             return;
         }
         var min = model.get('min');
         var max = model.get('max');
-        var originalExtent = axis.scale.getExtent();
+        var originalExtent = scale.getExtent();
         // TODO Only one data
         if (min === 'dataMin') {
             min = originalExtent[0];
@@ -88,36 +90,11 @@ define(function(require, factory) {
         else if (max === 'dataMax') {
             max = originalExtent[1];
         }
-        axis.scale.setExtent(min, max);
-        axis.scale.niceExtent(model.get('splitNumber'), !!min, !!max);
+        scale.setExtent(min, max);
+        scale.niceExtent(model.get('splitNumber'), !!min, !!max);
     }
 
     function Grid(gridModel, ecModel, api) {
-
-        /**
-         * @type {number}
-         * @private
-         */
-        this._x = 0;
-
-        /**
-         * @type {number}
-         * @private
-         */
-        this._y = 0;
-
-        /**
-         * @type {number}
-         * @private
-         */
-        this._width = 0;
-
-        /**
-         * @type {number}
-         * @private
-         */
-        this._height = 0;
-
         /**
          * @type {Object.<string, module:echarts/coord/cartesian/Cartesian2D>}
          * @private
@@ -150,12 +127,7 @@ define(function(require, factory) {
         type: 'grid',
 
         getRect: function () {
-            return {
-                x: this._x,
-                y: this._y,
-                width: this._width,
-                height: this._height
-            };
+            return this._rect;
         },
 
         /**
@@ -164,34 +136,26 @@ define(function(require, factory) {
          * @param {module:echarts/ExtensionAPI} api
          */
         resize: function (gridModel, api) {
-            var viewportWidth = api.getWidth();
-            var viewportHeight = api.getHeight();
-
-            var parsePercent = numberUtil.parsePercent;
-            var gridX = parsePercent(gridModel.get('x'), viewportWidth);
-            var gridY = parsePercent(gridModel.get('y'), viewportHeight);
-            var gridX2 = parsePercent(gridModel.get('x2'), viewportWidth);
-            var gridY2 = parsePercent(gridModel.get('y2'), viewportHeight);
-            var gridWidth = parsePercent(gridModel.get('width'), viewportWidth);
-            var gridHeight = parsePercent(gridModel.get('height'), viewportHeight);
-
-            if (isNaN(gridWidth)) {
-                gridWidth = viewportWidth - gridX2 - gridX;
-            }
-            if (isNaN(gridHeight)) {
-                gridHeight = viewportHeight - gridY2 - gridY;
-            }
 
-            this._x = gridX;
-            this._y = gridY;
-            this._width = gridWidth;
-            this._height = gridHeight;
+            var gridRect = layout.parsePositionInfo({
+                x: gridModel.get('x'),
+                y: gridModel.get('y'),
+                x2: gridModel.get('x2'),
+                y2: gridModel.get('y2'),
+                width: gridModel.get('width'),
+                height: gridModel.get('height')
+            }, {
+                width: api.getWidth(),
+                height: api.getHeight()
+            });
+
+            this._rect = gridRect;
 
             each(this._axesList, function (axis) {
                 var isHorizontal = axis.isHorizontal();
                 var extent = isHorizontal
-                    ? [gridX, gridX + gridWidth]
-                    : [gridY + gridHeight, gridY];
+                    ? [gridRect.x, gridRect.x + gridRect.width]
+                    : [gridRect.y + gridRect.height, gridRect.y];
 
                 axis.setExtent(extent[0], extent[1]);
             });

src/coord/cartesian/GridModel.js

@@ -6,7 +6,9 @@ define(function(require) {
 
     require('./AxisModel');
 
-    require('../../echarts').extendComponentModel({
+    var zrUtil = require('zrender/core/util');
+
+    var GridModel = require('../../echarts').extendComponentModel({
 
         type: 'grid',
 

src/coord/geo/Geo.js

 define(function (require) {
 
     var parseGeoJson = require('./parseGeoJson');
-    var vector = require('zrender/core/vector');
-    var matrix = require('zrender/core/matrix');
 
-    var Transformable = require('zrender/mixin/Transformable');
     var zrUtil = require('zrender/core/util');
 
     var BoundingRect = require('zrender/core/BoundingRect');
 
-    var v2Copy = vector.copy;
+    var View = require('../View');
 
     // Geo fix functions
     var geoFixFuncs = [
@@ -18,25 +15,15 @@ define(function (require) {
         require('./fix/geoCoord')
     ];
 
-    // Dummy transform node
-    function TransformDummy() {
-        Transformable.call(this);
-    }
-    zrUtil.mixin(TransformDummy, Transformable);
-
     function Geo(name, map, geoJson) {
 
-        /**
-         * @type {string}
-         */
-        this.name = name;
+        View.call(this, name);
 
         /**
          * Map type
          * @type {string}
          */
         this.map = map;
-
         /**
          * @param {Array.<string>}
          * @readOnly
@@ -46,23 +33,6 @@ define(function (require) {
         this._nameCoordMap = {};
 
         this.loadGeoJson(geoJson);
-
-        Transformable.call(this);
-
-        /**
-         * @param Array.<number>
-         */
-        this.mapPosition = [0, 0];
-
-        /**
-         * @param Array.<number>
-         */
-        this.mapScale = [1, 1];
-
-
-        this._roamTransform = new TransformDummy();
-
-        this._mapTransform = new TransformDummy();
     };
 
     Geo.prototype = {
@@ -123,94 +93,7 @@ define(function (require) {
             return this._nameCoordMap[name];
         },
 
-        /**
-         * Transformed to particular position and size
-         * @param {number} x
-         * @param {number} y
-         * @param {number} width
-         * @param {number} height
-         */
-        transformTo: function (x, y, width, height) {
-            var rect = this.getBoundingRect();
-
-            rect = rect.clone();
-            // Longitute is inverted
-            rect.y = -rect.y - rect.height;
-
-            this.transform = rect.calculateTransform(
-                new BoundingRect(x, y, width, height)
-            );
-
-            this.decomposeTransform();
-
-            var scale = this.scale;
-            var mapTransform = this._mapTransform
-
-            scale[1] = -scale[1];
-
-            v2Copy(mapTransform.position, this.position);
-            v2Copy(mapTransform.scale, scale);
-
-            this._updateTransform();
-        },
-
-        /**
-         * @param {number} x
-         * @param {number} y
-         * @param {number} width
-         * @param {number} height
-         */
-        setViewBox: function (x, y, width, height) {
-            this._viewBox = new BoundingRect(x, y, width, height);
-        },
-
-        /**
-         * @param {number} x
-         * @param {number} y
-         */
-        setPan: function (x, y) {
-
-            this._roamTransform.position = [x, y];
-
-            this._updateTransform();
-        },
-
-        /**
-         * @param {number} zoom
-         */
-        setZoom: function (zoom) {
-            this._roamTransform.scale = [zoom, zoom];
-
-            this._updateTransform();
-        },
-
-        /**
-         * Update transform from roam and mapLocation
-         * @private
-         */
-        _updateTransform: function () {
-            var roamTransform = this._roamTransform;
-            var mapTransform = this._mapTransform;
-            var scale = this.scale;
-
-            mapTransform.parent = roamTransform;
-            roamTransform.updateTransform();
-            mapTransform.updateTransform();
-
-            mapTransform.transform && matrix.copy(this.transform, mapTransform.transform);
-
-            this.decomposeTransform();
-
-            scale[1] = -scale[1];
-
-            // Update transform position
-
-            this.updateTransform();
-        },
-
-        /**
-         * @return {module:zrender/core/BoundingRect}
-         */
+        // Overwrite
         getBoundingRect: function () {
             if (this._rect) {
                 return this._rect;
@@ -227,29 +110,6 @@ define(function (require) {
             return this._rect = rect || new BoundingRect(0, 0, 0, 0);
         },
 
-        /**
-         * @return {module:zrender/core/BoundingRect}
-         */
-        getViewBox: function () {
-            return this._viewBox;
-        },
-
-        /**
-         * If contain point
-         * @param {Array.<number>} point
-         * @return {boolean}
-         */
-        containPoint: function (point) {
-        },
-
-        /**
-         * If contain data
-         * @param {Array.<number>} data
-         * @return {boolean}
-         */
-        containData: function (data) {
-        },
-
         /**
          * Convert series data to a list of points
          * @param {module:echarts/data/List} data
@@ -265,34 +125,10 @@ define(function (require) {
                 item[1] = lat;
                 return this.dataToPoint(item);
             }, this);
-        },
-
-        /**
-         * Convert a single (lon, lat) data item to (x, y) point.
-         * @param {Array.<number>} data
-         * @return {Array.<number>}
-         */
-        dataToPoint: function (data) {
-            var transform = this.transform;
-            return transform
-                ? vector.applyTransform([], data, this.transform)
-                : data.slice();
-        },
-
-        /**
-         * Convert a (x, y) point to (lon, lat) data
-         * @param {Array.<number>} point
-         * @return {Array.<number>}
-         */
-        pointToData: function (point) {
-            var invTransform = this.invTransform;
-            return invTransform
-                ? vector.applyTransform([], point, invTransform)
-                : point.slice();
         }
     };
 
-    zrUtil.mixin(Geo, Transformable);
+    zrUtil.mixin(Geo, View);
 
     return Geo;
 });
\ No newline at end of file

src/coord/geo/geoCreator.js

@@ -70,8 +70,7 @@ define(function (require) {
 
         x = cx - width / 2;
         y = cy - height / 2;
-        this.transformTo(x, y, width, height);
-        this.setViewBox(x, y, width, height);
+        this.setViewRect(x, y, width, height);
 
         var roamDetailModel = geoModel.getModel('roamDetail');
 
@@ -81,7 +80,7 @@ define(function (require) {
 
         this.setPan(panX, panY);
         this.setZoom(zoom);
-    }
+    };
 
     var geoCreator = {
 
@@ -174,7 +173,7 @@ define(function (require) {
     // TODO
     echarts.loadMap = function () {
 
-    }
+    };
 
     echarts.registerCoordinateSystem('geo', geoCreator);
 });
\ No newline at end of file

src/data/Graph.js

@@ -280,7 +280,6 @@ define(function(require) {
 
 
     /**
-     * 图节点
      * @alias module:echarts/data/Graph.Node
      */
     function Node(name, dataIndex) {
@@ -305,6 +304,11 @@ define(function(require) {
          * @type {module:echarts/data/Graph}
          */
         this.hostGraph;
+
+        /**
+         * @type {number}
+         */
+        this.dataIndex = dataIndex == null ? -1 : dataIndex;
     };
 
     Node.prototype = {

src/data/Tree.js

@@ -412,8 +412,6 @@ define(function(require) {
 
         var list = createList(listData, hostModel);
 
-        tree.data = list;
-
         linkListHelper.linkToTree(list, tree);
 
         return tree;

src/data/helper/linkList.js

@@ -13,6 +13,7 @@ define(function (require) {
         });
 
         list[targetType] = target;
+        target.data = list;
 
         return list;
     }

src/parser/gexf.js

+// GEXF File Parser
+// http://gexf.net/1.2draft/gexf-12draft-primer.pdf
+define(function(require) {
+
+    'use strict';
+
+    var zrUtil = require('zrender/core/util');
+
+    function parse(xml) {
+        var doc;
+        if (typeof xml === 'string') {
+            var parser = new DOMParser();
+            doc = parser.parseFromString(xml, 'text/xml');
+        }
+        else {
+            doc = xml;
+        }
+        if (!doc || doc.getElementsByTagName("parsererror").length) {
+            return null;
+        }
+
+        var gexfRoot = doc.firstChild;
+
+        if (!gexfRoot) {
+            return null;
+        }
+
+        var graphRoot = getChildByTagName(gexfRoot, 'graph');
+
+        var attributes = parseAttributes(getChildByTagName(graphRoot, 'attributes'));
+        var attributesMap = {};
+        for (var i = 0; i < attributes.length; i++) {
+            attributesMap[attributes[i].name] = attributes[i];
+        }
+
+        return {
+            nodes: parseNodes(getChildByTagName(graphRoot, 'nodes'), attributesMap),
+            links: parseEdges(getChildByTagName(graphRoot, 'edges'))
+        };
+    }
+
+    function parseAttributes(parent) {
+        return parent ? zrUtil.map(getChildrenByTagName(parent, 'attribute'), function (attribDom) {
+            return {
+                name: attribDom.getAttribute('id'),
+                title: attribDom.getAttribute('title'),
+                type: attribDom.getAttribute('type')
+            };
+        }) : [];
+    }
+
+    function parseNodes(parent, attributesMap) {
+        return parent ? zrUtil.map(getChildrenByTagName(parent, 'node'), function (nodeDom) {
+
+            var id = nodeDom.getAttribute('id');
+            var label = nodeDom.getAttribute('label');
+
+            var node = {
+                name: id,
+                label: {
+                    normal: {
+                        formatter: label
+                    }
+                },
+                itemStyle: {
+                    normal: {}
+                }
+            };
+
+            var vizSizeDom = getChildByTagName(nodeDom, 'viz:size');
+            var vizPosDom = getChildByTagName(nodeDom, 'viz:position');
+            var vizColorDom = getChildByTagName(nodeDom, 'viz:color');
+            var vizShapeDom = getChildByTagName(nodeDom, 'viz:shape');
+
+            var attvaluesDom = getChildByTagName(nodeDom, 'attvalues');
+
+            if (vizSizeDom) {
+                node.itemStyle.normal.symbolSize = parseFloat(vizSizeDom.getAttribute('value'));
+            }
+            if (vizPosDom) {
+                node.x = parseFloat(vizPosDom.getAttribute('x'));
+                node.y = parseFloat(vizPosDom.getAttribute('y'));
+                // z
+            }
+            if (vizColorDom) {
+                node.itemStyle.normal.color = 'rgb(' +
+                    [parseInt(vizColorDom.getAttribute('r')),
+                    parseInt(vizColorDom.getAttribute('g')),
+                    parseInt(vizColorDom.getAttribute('b'))].join(',')
+                    + ')';
+            }
+            if (vizShapeDom) {
+                // node.shape = vizShapeDom.getAttribute('shape');
+            }
+            if (attvaluesDom) {
+                var attvalueDomList = getChildrenByTagName(attvaluesDom, 'attvalue');
+
+                node.attributes = {};
+
+                for (var j = 0; j < attvalueDomList.length; j++) {
+                    var attvalueDom = attvalueDomList[j];
+                    var attId = attvalueDom.getAttribute('for');
+                    var attValue = attvalueDom.getAttribute('value');
+                    var attribute = attributesMap[attId];
+
+                    if (attribute) {
+                        switch (attribute.type) {
+                            case "integer":
+                            case "long":
+                                attValue = parseInt(attValue);
+                                break;
+                            case "float":
+                            case "double":
+                                attValue = parseFloat(attValue);
+                                break;
+                            case "boolean":
+                                attValue = attValue.toLowerCase() == 'true';
+                                break;
+                            default:
+                        }
+                        node.attributes[attId] = attValue;
+                    }
+                }
+            }
+
+            return node;
+        }) : [];
+    }
+
+    function parseEdges(parent) {
+        return parent ? zrUtil.map(getChildrenByTagName(parent, 'edge'), function (edgeDom) {
+            var id = edgeDom.getAttribute('id');
+            var label = edgeDom.getAttribute('label');
+
+            var sourceId = edgeDom.getAttribute('source');
+            var targetId = edgeDom.getAttribute('target');
+
+            var edge = {
+                name: id,
+                source: sourceId,
+                target: targetId,
+                linkStyle: {
+                    normal: {}
+                }
+            };
+
+            var linkStyle = edge.linkStyle.normal;
+
+            var vizThicknessDom = getChildByTagName(edgeDom, 'viz:thickness');
+            var vizColorDom = getChildByTagName(edgeDom, 'viz:color');
+            var vizShapeDom = getChildByTagName(edgeDom, 'viz:shape');
+
+            if (vizThicknessDom) {
+                linkStyle.thickness = parseFloat(vizThicknessDom.getAttribute('value'));
+            }
+            if (vizColorDom) {
+                linkStyle.color = 'rgb(' + [
+                    parseInt(vizColorDom.getAttribute('r')),
+                    parseInt(vizColorDom.getAttribute('g')),
+                    parseInt(vizColorDom.getAttribute('b'))
+                ].join(',') + ')';
+            }
+            // if (vizShapeDom) {
+            //     edge.shape = vizShapeDom.getAttribute('shape');
+            // }
+
+            return edge;
+        }) : [];
+    }
+
+    function getChildByTagName (parent, tagName) {
+        var node = parent.firstChild;
+
+        while (node) {
+            if (
+                node.nodeType != 1 ||
+                node.nodeName.toLowerCase() != tagName.toLowerCase()
+            ) {
+                node = node.nextSibling;
+            } else {
+                return node;
+            }
+        }
+
+        return null;
+    }
+
+    function getChildrenByTagName (parent, tagName) {
+        var node = parent.firstChild;
+        var children = [];
+        while (node) {
+            if (node.nodeName.toLowerCase() == tagName.toLowerCase()) {
+                children.push(node);
+            }
+            node = node.nextSibling;
+        }
+
+        return children;
+    }
+
+    return {
+        parse: parse
+    };
+});
\ No newline at end of file

src/util/layout.js

@@ -3,6 +3,7 @@ define(function(require) {
     'use strict';
 
     var zrUtil = require('zrender/core/util');
+    var BoundingRect = require('zrender/core/BoundingRect');
     var numberUtil = require('./number');
     var formatUtil = require('./format');
     var parsePercent = numberUtil.parsePercent;
@@ -100,6 +101,8 @@ define(function(require) {
      * @param {string|number} margin
      * @param {boolean} [notAlignX=false]
      * @param {boolean} [notAlignY=false]
+     *
+     * @return {module:zrender/core/BoundingRect}
      */
     layout.parsePositionInfo = function (
         positionInfo, containerRect, margin,
@@ -117,14 +120,20 @@ define(function(require) {
         var width = parsePercent(positionInfo.width, containerWidth);
         var height = parsePercent(positionInfo.height, containerHeight);
 
-        height += margin[2] + margin[0];
-        width += margin[1] + margin[3];
+        // If width is not specified, calculate width from x and x2
+        if (isNaN(width)) {
+            width = containerWidth - x2 - margin[2] - margin[0] - x;
+        }
+        if (isNaN(height)) {
+            height = containerHeight - y2 - margin[1] - margin[3] - y;
+        }
+
         // If x is not specified, calculate x from x2 and width
         if (isNaN(x)) {
-            x = x2 - width;
+            x = containerWidth - x2 - width - margin[2] - margin[0];
         }
         if (isNaN(y)) {
-            y = y2 - height;
+            y = containerHeight - y2 - height - margin[1] - margin[3];
         }
 
         if (!notAlignX) {
@@ -140,6 +149,7 @@ define(function(require) {
         if (!notAlignY) {
             switch (positionInfo.y || positionInfo.y2) {
                 case 'middle':
+                case 'center':
                     y = containerHeight / 2 - height / 2;
                     break;
                 case 'bottom':
@@ -148,13 +158,9 @@ define(function(require) {
             }
         }
 
-        return {
-            x: x + margin[3],
-            y: y + margin[0],
-            width: width,
-            height: height,
-            margin: margin
-        };
+        var rect = new BoundingRect(x + margin[3], y + margin[0], width, height);
+        rect.margin = margin;
+        return rect;
     };
 
     /**

src/util/number.js

@@ -53,6 +53,7 @@ define(function (require) {
     function parsePercent(percent, all) {
         switch (percent) {
             case 'center':
+            case 'middle':
                 percent = '50%';
                 break;
             case 'left':

src/view/Chart.js

@@ -20,7 +20,7 @@ define(function (require) {
 
     Chart.prototype = {
 
-        type: '',
+        type: 'chart',
 
         init: function (ecModel, api) {},
 

test/graph.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/parser/gexf',
+
+                'echarts/chart/graph',
+
+                'echarts/component/title',
+                'echarts/component/legend',
+                'echarts/component/geo',
+                'echarts/component/tooltip',
+                'echarts/component/dataRange'
+            ], function (echarts, gexf) {
+
+                echarts.registerMap('china');
+
+                var chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'canvas'
+                });
+
+                $.get('./data/les-miserables.gexf', function (xml) {
+                    var graph = gexf.parse(xml);
+                    graph.nodes.forEach(function (node) {
+                        node.value = 1;
+                    });
+                    chart.setOption({
+                        series : [
+                            {
+                                name: 'iphone3',
+                                type: 'graph',
+                                data: graph.nodes,
+                                links: graph.links
+                            }
+                        ]
+                    });
+                });
+            })
+
+        </script>
+    </body>
+</html>
\ No newline at end of file