From 242830b393a32fb387d1f7f2e3c26943b5f4ee3c Mon Sep 17 00:00:00 2001 From: lang Date: Fri, 30 Oct 2015 17:39:19 +0800 Subject: [PATCH] Update graph --- src/chart/graph.js | 3 + src/chart/graph/GraphSeries.js | 69 ++++++++++++++++-- src/chart/graph/GraphView.js | 71 +++++++++++++++++-- src/chart/graph/categoryFilter.js | 28 ++++++++ src/chart/graph/categoryVisual.js | 43 +++++++++++ src/chart/graph/simpleLayout.js | 54 ++++++++++++-- src/chart/helper/LineDraw.js | 21 ++++-- src/chart/helper/SymbolDraw.js | 2 +- ...odeLinks.js => createGraphFromNodeEdge.js} | 16 +++-- src/chart/helper/dataSelectableMixin.js | 10 +-- src/chart/map/MapSeries.js | 6 +- src/chart/pie/PieSeries.js | 8 +-- src/chart/pie/pieVisual.js | 5 +- src/component/helper/RoamController.js | 28 +++++--- src/data/Graph.js | 38 +++++++--- src/echarts.js | 2 +- src/parser/gexf.js | 8 +-- test/graph.html | 21 +++++- test/pie.html | 2 + test/timeScale.html | 4 +- 20 files changed, 363 insertions(+), 76 deletions(-) create mode 100644 src/chart/graph/categoryFilter.js create mode 100644 src/chart/graph/categoryVisual.js rename src/chart/helper/{createGraphFromNodeLinks.js => createGraphFromNodeEdge.js} (63%) diff --git a/src/chart/graph.js b/src/chart/graph.js index 6677db204..6ed5699df 100644 --- a/src/chart/graph.js +++ b/src/chart/graph.js @@ -6,9 +6,12 @@ define(function (require) { require('./graph/GraphSeries'); require('./graph/GraphView'); + echarts.registerProcessor('filter', require('./graph/categoryFilter')); + echarts.registerVisualCoding('chart', zrUtil.curry( require('../visual/symbol'), 'graph', 'circle', null )); + echarts.registerVisualCoding('chart', require('./graph/categoryVisual')); echarts.registerLayout(require('./graph/simpleLayout')); }); \ No newline at end of file diff --git a/src/chart/graph/GraphSeries.js b/src/chart/graph/GraphSeries.js index 2e838f98a..b9b272213 100644 --- a/src/chart/graph/GraphSeries.js +++ b/src/chart/graph/GraphSeries.js @@ -3,22 +3,61 @@ define(function (require) { 'use strict'; var SeriesModel = require('../../model/Series'); + var List = require('../../data/List'); + var zrUtil = require('zrender/core/util'); - var createGraphNodeLinks = require('../helper/createGraphFromNodeLinks'); + var createGraphFromNodeEdge = require('../helper/createGraphFromNodeEdge'); return SeriesModel.extend({ type: 'series.graph', + init: function (option) { + SeriesModel.prototype.init.apply(this, arguments); + + this._udpateCategoriesData(); + + // Provide data for legend select + this.legendDataProvider = function () { + return this._categoriesData; + }; + }, + + mergeOption: function (option) { + SeriesModel.prototype.mergeOption.apply(this, arguments); + + this._udpateCategoriesData(); + }, + + _udpateCategoriesData: function () { + var categories = zrUtil.map(this.option.categories || [], function (category) { + // Data must has value + return category.value != null ? category : zrUtil.extend({value : 0}, category); + }); + var categoriesData = new List(['value'], this); + categoriesData.initData(categories); + + this._categoriesData = categoriesData; + }, + getInitialData: function (option, ecModel) { - if (option.data && option.links) { - var graph = createGraphNodeLinks( - option.data, option.links, this, true - ); + var edges = option.edges || option.links; + var nodes = option.data || option.nodes; + if (nodes && edges) { + var graph = createGraphFromNodeEdge(nodes, edges, this, true); return graph.data; } }, + /** + * Get category model by index + * @param {number} id Category index + * @return {module:echarts/model/Model} + */ + getCategoriesData: function () { + return this._categoriesData; + }, + defaultOption: { zlevel: 0, z: 2, @@ -31,14 +70,30 @@ define(function (require) { y: 'center', x2: null, y2: null, - width: '80%', - height: '80%', + width: '90%', + height: '90%', symbol: 'circle', symbolSize: 10, + roam: true, + + // Symbol size scale ratio in roam + nodeScaleRatio: 0.6, + + // Line width scale ratio in roam + edgeScaleRatio: 0.1, + // categories: [], + // data: [] + // Or + // nodes: [] + // + // links: [] + // Or + // edges: [] + label: { normal: { show: false diff --git a/src/chart/graph/GraphView.js b/src/chart/graph/GraphView.js index ab416cfb0..2304c92cd 100644 --- a/src/chart/graph/GraphView.js +++ b/src/chart/graph/GraphView.js @@ -2,30 +2,39 @@ define(function (require) { var SymbolDraw = require('../helper/SymbolDraw'); var LineDraw = require('../helper/LineDraw'); + var RoamController = require('../../component/helper/RoamController'); require('../../echarts').extendChartView({ type: 'graph', - init: function () { + init: function (ecModel, api) { var symbolDraw = new SymbolDraw(); var lineDraw = new LineDraw(); + var group = this.group; - this.group.add(symbolDraw.group); - this.group.add(lineDraw.group); + group.add(symbolDraw.group); + group.add(lineDraw.group); this._symbolDraw = symbolDraw; this._lineDraw = lineDraw; + + this._controller = new RoamController(api.getZr(), group); }, render: function (seriesModel, ecModel, api) { + var coordSys = seriesModel.coordinateSystem; + // Only support view and geo coordinate system + if (coordSys.type !== 'geo' && coordSys.type !== 'view') { + return; + } + var data = seriesModel.getData(); + this._model = seriesModel; var symbolDraw = this._symbolDraw; var lineDraw = this._lineDraw; - var coordSys = seriesModel.coordinateSystem; - symbolDraw.updateData( data, seriesModel, api, false ); @@ -35,9 +44,57 @@ define(function (require) { seriesModel, api, false ); - var scalarScale = coordSys && coordSys.getScalarScale(); + // Save the original lineWidth + data.graph.eachEdge(function (edge) { + edge.__lineWidth = edge.getModel('lineStyle.normal').get('width'); + }); + + var group = this.group; + group.attr({ + position: coordSys.position, + scale: coordSys.scale + }); + + this._nodeScaleRatio = seriesModel.get('nodeScaleRatio'); + this._edgeScaleRatio = seriesModel.get('edgeScaleRatio'); + + this._updateNodeAndLinkScale(); + + var controller = this._controller; + controller.rect = coordSys.getViewRect(); + + controller.disable(); + seriesModel.get('roam') && controller.enable(); + controller.on('zoom', this._updateNodeAndLinkScale, this); + }, + + _updateNodeAndLinkScale: function () { + var seriesModel = this._model; + var data = seriesModel.getData(); + + var group = this.group; + var nodeScaleRatio = this._nodeScaleRatio; + var edgeScaleRatio = this._edgeScaleRatio; + + // Assume scale aspect is 1 + var groupScale = group.scale[0]; + + var nodeScale = (groupScale - 1) * nodeScaleRatio + 1; + var edgeScale = (groupScale - 1) * edgeScaleRatio + 1; + var invScale = [ + nodeScale / groupScale, + nodeScale / groupScale + ]; + data.eachItemGraphicEl(function (el, idx) { - el.scale[0] = el.scale[1] = scalarScale; + el.attr('scale', invScale); + }); + + data.graph.eachEdge(function (edge) { + edge.getGraphicEl().setStyle( + 'lineWidth', + edge.__lineWidth * edgeScale / groupScale + ); }); }, diff --git a/src/chart/graph/categoryFilter.js b/src/chart/graph/categoryFilter.js new file mode 100644 index 000000000..cf83dc509 --- /dev/null +++ b/src/chart/graph/categoryFilter.js @@ -0,0 +1,28 @@ +define(function (require) { + + return function (ecModel) { + var legendModel = ecModel.getComponent('legend'); + if (!legendModel) { + return; + } + ecModel.eachSeriesByType('graph', function (graphSeries) { + var categoriesData = graphSeries.getCategoriesData(); + var data = graphSeries.getData(); + + var categoryNames = categoriesData.mapArray(categoriesData.getName); + + data.filterSelf(function (idx) { + var model = data.getItemModel(idx); + var category = model.getShallow('category'); + if (category != null) { + if (typeof category === 'number') { + category = categoryNames[category]; + } + return legendModel.isSelected(category); + } + return true; + }); + + }, this); + }; +}); \ No newline at end of file diff --git a/src/chart/graph/categoryVisual.js b/src/chart/graph/categoryVisual.js new file mode 100644 index 000000000..126bd2229 --- /dev/null +++ b/src/chart/graph/categoryVisual.js @@ -0,0 +1,43 @@ +define(function (require) { + + return function (ecModel) { + var offset = 0; + var colorList = ecModel.get('color'); + + ecModel.eachSeriesByType('graph', function (seriesModel) { + var categoriesData = seriesModel.getCategoriesData(); + var data = seriesModel.getData(); + + var categoryNameIdxMap = {}; + + categoriesData.each(function (idx) { + categoryNameIdxMap[categoriesData.getName(idx)] = idx; + + var itemModel = categoriesData.getItemModel(idx); + var rawIdx = categoriesData.getRawIndex(idx); + var color = itemModel.get('itemStyle.normal.color') + || colorList[(offset + rawIdx) % colorList.length]; + categoriesData.setItemVisual(idx, 'color', color); + }); + + offset += categoriesData.count(); + + // Assign category color to visual + if (categoriesData.count()) { + data.each(function (idx) { + var model = data.getItemModel(idx); + var category = model.getShallow('category'); + if (category != null) { + if (typeof category === 'string') { + category = categoryNameIdxMap[category]; + } + data.setItemVisual( + idx, 'color', + categoriesData.getItemVisual(category, 'color') + ); + } + }); + } + }); + }; +}); \ No newline at end of file diff --git a/src/chart/graph/simpleLayout.js b/src/chart/graph/simpleLayout.js index a90aad791..4f8320868 100644 --- a/src/chart/graph/simpleLayout.js +++ b/src/chart/graph/simpleLayout.js @@ -1,6 +1,6 @@ define(function (require) { - // FIXME Where to create the simple view layout + // FIXME Where to create the simple view coordinate system var View = require('../../coord/View'); var bbox = require('zrender/core/bbox'); var layout = require('../../util/layout'); @@ -36,18 +36,60 @@ define(function (require) { bbox.fromPoints(positions, min, max); + var bbWidth = max[0] - min[0]; + var bbHeight = max[1] - min[1]; + + var aspect = bbWidth / bbHeight; + + var viewWidth = viewRect.width; + var viewHeight = viewRect.height; + + // Uniform scale on width and height + if (viewWidth / viewHeight > aspect) { + viewWidth = aspect * viewHeight; + } + else { + viewHeight = aspect * viewWidth; + } + // Adjust x and y + viewRect.x += (viewRect.width - viewWidth) / 2; + viewRect.y += (viewRect.height - viewHeight) / 2; + coordSys.setBoundingRect( - min[0], min[1], max[0] - min[0], max[1] - min[1] + min[0], min[1], bbWidth, bbHeight ); coordSys.setViewRect( - viewRect.x, viewRect.y, viewRect.width, viewRect.height + viewRect.x, viewRect.y, viewWidth, viewHeight ); graph.eachNode(function (node) { - node.setLayout( - coordSys.dataToPoint(positions[node.dataIndex]) - ); + node.setLayout(positions[node.dataIndex]); + }); + + graph.eachEdge(function (edge) { + var curveness = edge.getModel().get('lineStyle.normal.curveness'); + var p1 = edge.node1.getLayout(); + var p2 = edge.node2.getLayout(); + var cp1; + var inv = 1; + if (curveness > 0) { + cp1 = [ + (p1[0] + p2[0]) / 2 - inv * (p1[1] - p2[1]) * curveness, + (p1[1] + p2[1]) / 2 - inv * (p2[0] - p1[0]) * curveness + ]; + } + var shape = { + x1: p1[0], + y1: p1[1], + x2: p2[0], + y2: p2[1] + }; + if (cp1) { + shape.cpx1 = cp1[0]; + shape.cpy1 = cp1[1]; + } + edge.setLayout(shape); }); } }); diff --git a/src/chart/helper/LineDraw.js b/src/chart/helper/LineDraw.js index ee743af2d..dbe1d60a0 100644 --- a/src/chart/helper/LineDraw.js +++ b/src/chart/helper/LineDraw.js @@ -12,7 +12,7 @@ define(function (require) { * @param {module:echarts/data/List} data * @param {module:echarts/model/Series} seriesModel * @param {module:echarts/ExtensionAPI} api - * @param {boolean} enableAnimation + * @param {boolean} [enableAnimation=false] */ lineDrawProto.updateData = function (data, seriesModel, api, enableAnimation) { var group = this.group; @@ -21,16 +21,22 @@ define(function (require) { data.diff(oldData) .add(function (idx) { var shape = data.getItemLayout(idx); - var line = new graphic[shape.cpx1 != null ? 'BezierCurve' : 'Line']({ - shape: shape - }); + if (shape) { + var line = new graphic[shape.cpx1 != null ? 'BezierCurve' : 'Line']({ + shape: shape + }); - data.setItemGraphicEl(idx, line); - group.add(line); + data.setItemGraphicEl(idx, line); + group.add(line); + } }) .update(function (newIdx, oldIdx) { var line = oldData.getItemGraphicEl(oldIdx); var shape = data.getItemLayout(newIdx); + if (!shape) { + group.remove(line); + return; + } if (shape.cpx1 != null && shape.type === 'line') { var oldShape = line.shape; line = new graphic.BezierCurve({ @@ -42,6 +48,9 @@ define(function (require) { }); } api.updateGraphicEl(line, shape); + + data.setItemGraphicEl(newIdx, line); + group.add(line); }) .remove(function (idx) { group.remove(oldData.getItemGraphicEl(idx)); diff --git a/src/chart/helper/SymbolDraw.js b/src/chart/helper/SymbolDraw.js index e5901325e..55f0c860a 100644 --- a/src/chart/helper/SymbolDraw.js +++ b/src/chart/helper/SymbolDraw.js @@ -64,7 +64,7 @@ define(function (require) { * @param {module:echarts/data/List} data * @param {module:echarts/model/Series} seriesModel * @param {module:echarts/ExtensionAPI} api - * @param {boolean} enableAnimation + * @param {boolean} [enableAnimation=false] * @param {Array.} [ignoreMap] */ symbolProto.updateData = function ( diff --git a/src/chart/helper/createGraphFromNodeLinks.js b/src/chart/helper/createGraphFromNodeEdge.js similarity index 63% rename from src/chart/helper/createGraphFromNodeLinks.js rename to src/chart/helper/createGraphFromNodeEdge.js index 82dfcffad..3dd3d6f03 100644 --- a/src/chart/helper/createGraphFromNodeLinks.js +++ b/src/chart/helper/createGraphFromNodeEdge.js @@ -5,13 +5,16 @@ define(function (require) { var linkList = require('../../data/helper/linkList'); var zrUtil = require('zrender/core/util'); - return function (nodes, links, hostModel, directed) { + return function (nodes, edges, hostModel, directed) { var graph = new Graph(directed); for (var i = 0; i < nodes.length; i++) { - graph.addNode(nodes[i].name, i); + graph.addNode(nodes[i].id || nodes[i].name, i); } - for (var i = 0; i < links.length; i++) { - var link = links[i]; + + var linkNameList = []; + for (var i = 0; i < edges.length; i++) { + var link = edges[i]; + linkNameList[i] = link.id || link.source + ' - ' + link.target; graph.addEdge(link.source, link.target, i); } @@ -20,7 +23,12 @@ define(function (require) { 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); + var edgeData = new List(['weight'], hostModel); + nodeData.initData(nodes); + edgeData.initData(edges, linkNameList, 'weight'); + + graph.edgeData = edgeData; linkList.linkToGraph(nodeData, graph); diff --git a/src/chart/helper/dataSelectableMixin.js b/src/chart/helper/dataSelectableMixin.js index 9f11246d9..a6b60fdc6 100644 --- a/src/chart/helper/dataSelectableMixin.js +++ b/src/chart/helper/dataSelectableMixin.js @@ -13,14 +13,10 @@ define(function (require) { updateSelectedMap: function () { var option = this.option; - // FIXME Keep selected status? - var dataOptMap = {}; - - zrUtil.each(option.data, function (dataOpt) { + this._dataOptMap = zrUtil.reduce(option.data, function (dataOptMap, dataOpt) { dataOptMap[dataOpt.name] = dataOpt; - }); - - this._dataOptMap = dataOptMap; + return dataOptMap; + }, {}); }, /** * @param {string} name diff --git a/src/chart/map/MapSeries.js b/src/chart/map/MapSeries.js index a05013439..0e9cf2e35 100644 --- a/src/chart/map/MapSeries.js +++ b/src/chart/map/MapSeries.js @@ -46,14 +46,12 @@ define(function (require) { */ seriesGroup: [], - init: function (option, parentModel, ecModel, dependentModels, seriesIndex) { + init: function (option) { option = this._fillOption(option); this.option = option; - SeriesModel.prototype.init.call( - this, option, parentModel, ecModel, dependentModels, seriesIndex - ); + SeriesModel.prototype.init.apply(this, arguments); this.updateSelectedMap(); }, diff --git a/src/chart/pie/PieSeries.js b/src/chart/pie/PieSeries.js index d119e31d0..b0ac04df5 100644 --- a/src/chart/pie/PieSeries.js +++ b/src/chart/pie/PieSeries.js @@ -12,16 +12,14 @@ define(function(require) { type: 'series.pie', - init: function (option, parentModel, ecModel, dependentModels, seriesIndex) { - SeriesModel.prototype.init.call( - this, option, parentModel, ecModel, dependentModels, seriesIndex - ); + init: function (option) { + SeriesModel.prototype.init.apply(this, arguments); // Enable legend selection for each data item // Use a function instead of direct access because data reference may changed this.legendDataProvider = function () { return this._dataBeforeProcessed; - } + }; this.updateSelectedMap(); }, diff --git a/src/chart/pie/pieVisual.js b/src/chart/pie/pieVisual.js index 6246d871e..9d466283a 100644 --- a/src/chart/pie/pieVisual.js +++ b/src/chart/pie/pieVisual.js @@ -5,9 +5,9 @@ define(function (require) { var colorList = ecModel.get('color'); ecModel.eachSeriesByTypeAll('pie', function (seriesModel) { + var dataAll = seriesModel.getDataAll(); if (!ecModel.isSeriesFiltered(seriesModel)) { var data = seriesModel.getData(); - var dataAll = seriesModel.getDataAll(); data.each(function (idx) { var itemModel = data.getItemModel(idx); var rawIdx = data.getRawIndex(idx); @@ -18,8 +18,7 @@ define(function (require) { data.setItemVisual(idx, 'color', color); }); } - offset += dataAll.count(); }); - } + }; }); \ No newline at end of file diff --git a/src/component/helper/RoamController.js b/src/component/helper/RoamController.js index a26b367a9..53d684bb0 100644 --- a/src/component/helper/RoamController.js +++ b/src/component/helper/RoamController.js @@ -1,3 +1,7 @@ +/** + * @module echarts/component/helper/RoamController + */ + define(function (require) { var Eventful = require('zrender/mixin/Eventful'); @@ -78,6 +82,10 @@ define(function (require) { } /** + * @alias module:echarts/component/helper/RoamController + * @constructor + * @mixin {module:zrender/mixin/Eventful} + * * @param {module:zrender/zrender~ZRender} zr * @param {module:zrender/Element} target * @param {module:zrender/core/BoundingRect} rect @@ -101,23 +109,27 @@ define(function (require) { var mouseupHandler = bind(mouseup, this); var mousewheelHandler = bind(mousewheel, this); - zr.on('mousedown', mousedownHandler); - zr.on('mousemove', mousemoveHandler); - zr.on('mouseup', mouseupHandler); - zr.on('mousewheel', mousewheelHandler); - Eventful.call(this); - this.dispose = function () { + this.enable = function () { + zr.on('mousedown', mousedownHandler); + zr.on('mousemove', mousemoveHandler); + zr.on('mouseup', mouseupHandler); + zr.on('mousewheel', mousewheelHandler); + }; + + this.disable = this.dispose = function () { zr.off('mousedown', mousedownHandler); zr.off('mousemove', mousemoveHandler); zr.off('mouseup', mouseupHandler); zr.off('mousewheel', mousewheelHandler); - } + }; + + this.enable(); this.isDragging = function () { return this._dragging; - } + }; } zrUtil.mixin(RoamController, Eventful); diff --git a/src/data/Graph.js b/src/data/Graph.js index a615c5356..1fbed718f 100644 --- a/src/data/Graph.js +++ b/src/data/Graph.js @@ -251,15 +251,26 @@ define(function(require) { graphProto.update = function () { var data = this.data; + var edgeData = this.edgeData; var nodes = this.nodes; + var edges = this.edges; for (var i = 0, len = nodes.length; i < len; i++) { nodes[i].dataIndex = -1; } - for (var i = 0, len = data.count(); i < len; i++) { nodes[data.getRawIndex(i)].dataIndex = i; } + + // Update edge + for (var i = 0, len = edges.length; i < len; i++) { + edges[i].dataIndex = -1; + } + for (var i = 0, len = edgeData.count(); i < len; i++) { + if (edges[i].node1.dataIndex >= 0 && edges[i].node2.dataIndex >= 0) { + edges[edgeData.getRawIndex(i)].dataIndex = i; + } + } }; /** @@ -390,14 +401,14 @@ define(function(require) { return itemModel.getModel(path); }; - var createGraphDataProxyMixin = function (dataName) { + var createGraphDataProxyMixin = function (hostName, dataName) { return { /** * @param {string=} [dimension='value'] Default 'value'. can be 'a', 'b', 'c', 'd', 'e'. * @return {number} */ getValue: function (dimension) { - return this.hostGraph[dataName].get(dimension || 'value', this.dataIndex); + return this[hostName][dataName].get(dimension || 'value', this.dataIndex); }, /** @@ -406,7 +417,7 @@ define(function(require) { */ setVisual: function (key, value) { this.dataIndex >= 0 - && this.hostGraph[dataName].setItemVisual(this.dataIndex, key, value); + && this[hostName][dataName].setItemVisual(this.dataIndex, key, value); }, /** @@ -414,7 +425,7 @@ define(function(require) { * @return {boolean} */ getVisual: function (key, ignoreParent) { - return this.hostGraph[dataName].getItemVisual(this.dataIndex, key, ignoreParent); + return this[hostName][dataName].getItemVisual(this.dataIndex, key, ignoreParent); }, /** @@ -423,27 +434,34 @@ define(function(require) { */ setLayout: function (layout, merge) { this.dataIndex >= 0 - && this.hostGraph[dataName].setItemLayout(this.dataIndex, layout, merge); + && this[hostName][dataName].setItemLayout(this.dataIndex, layout, merge); }, /** * @return {Object} */ getLayout: function () { - return this.hostGraph[dataName].getItemLayout(this.dataIndex); + return this[hostName][dataName].getItemLayout(this.dataIndex); + }, + + /** + * @return {module:zrender/Element} + */ + getGraphicEl: function () { + return this[hostName][dataName].getItemGraphicEl(this.dataIndex); }, /** * @return {number} */ getRawIndex: function () { - return this.hostGraph[dataName].getRawIndex(this.dataIndex); + return this[hostName][dataName].getRawIndex(this.dataIndex); } }; }; - zrUtil.mixin(Node, createGraphDataProxyMixin('data')); - zrUtil.mixin(Edge, createGraphDataProxyMixin('edgeData')); + zrUtil.mixin(Node, createGraphDataProxyMixin('hostGraph', 'data')); + zrUtil.mixin(Edge, createGraphDataProxyMixin('hostGraph', 'edgeData')); Graph.Node = Node; Graph.Edge = Edge; diff --git a/src/echarts.js b/src/echarts.js index b91e33380..6d54c8530 100644 --- a/src/echarts.js +++ b/src/echarts.js @@ -116,7 +116,7 @@ define(function (require) { each(optionPreprocessorFuncs, function (preProcess) { preProcess(option); - }) + }); var ecModel = this._model; if (!ecModel || notMerge) { diff --git a/src/parser/gexf.js b/src/parser/gexf.js index 7d75caf18..9de486dca 100644 --- a/src/parser/gexf.js +++ b/src/parser/gexf.js @@ -141,22 +141,22 @@ define(function(require) { name: label, source: sourceId, target: targetId, - linkStyle: { + lineStyle: { normal: {} } }; - var linkStyle = edge.linkStyle.normal; + var lineStyle = edge.lineStyle.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')); + lineStyle.width = parseFloat(vizThicknessDom.getAttribute('value')); } if (vizColorDom) { - linkStyle.color = 'rgb(' + [ + lineStyle.color = 'rgb(' + [ getAttr(vizColorDom, 'r') | 0, getAttr(vizColorDom, 'g') | 0, getAttr(vizColorDom, 'b') | 0 diff --git a/test/graph.html b/test/graph.html index 437903fc0..9d665c80a 100644 --- a/test/graph.html +++ b/test/graph.html @@ -38,19 +38,36 @@ $.get('./data/les-miserables.gexf', function (xml) { var graph = gexf.parse(xml); + var categories = []; + for (var i = 0; i < 9; i++) { + categories[i] = { + name: '类目' + i + }; + } graph.nodes.forEach(function (node) { node.itemStyle = null; - node.value = 1; + node.value = node.symbolSize; node.label.normal.show = node.symbolSize > 30; + node.category = node.attributes['modularity_class']; }); chart.setOption({ tooltip: {}, + legend: [{ + data: categories.map(function (a) {return a.name}) + }], + dataRange: { + max: 100, + inRange: { + colorS: [1, 0.3] + } + }, series : [ { - name: 'les-miserables', + name: 'Les Miserables', type: 'graph', data: graph.nodes, links: graph.links, + categories: categories, label: { normal: { position: 'right' diff --git a/test/pie.html b/test/pie.html index c56c762bc..05bd7a35d 100644 --- a/test/pie.html +++ b/test/pie.html @@ -48,6 +48,8 @@ stack: 'all', symbol: 'circle', symbolSize: 10, + selectedMode: 'single', + selectedOffset: 30, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, diff --git a/test/timeScale.html b/test/timeScale.html index 3f9796f8d..e42b2bc1e 100644 --- a/test/timeScale.html +++ b/test/timeScale.html @@ -134,7 +134,9 @@ type : 'time', boundaryGap : false, axisLine: {onZero: false}, - splitNumber: 20 + splitNumber: 20, + min: 'dataMin', + max: 'dataMax' } ], yAxis : [ -- GitLab