提交 21f1da3b 编写于 作者: L lang

Improve graph, add some code style

上级 fcf17311
......@@ -37,6 +37,8 @@ define(function (require) {
symbol: 'circle',
symbolSize: 10,
// categories: [],
label: {
normal: {
show: false
......@@ -53,13 +55,14 @@ define(function (require) {
}
},
linkStyle: {
lineStyle: {
normal: {
color: '#5182ab',
curveness: 0
color: '#aaa',
width: 1,
curveness: 0,
opacity: 0.5
},
emphasis: {
}
}
}
......
......@@ -9,21 +9,46 @@ define(function (require) {
init: function () {
var symbolDraw = new SymbolDraw();
var lineDraw = new LineDraw();
this.group.add(symbolDraw.group);
this.group.add(lineDraw.group);
this._symbolDraw = symbolDraw;
this._lineDraw = lineDraw;
},
render: function (seriesModel, ecModel, api) {
var data = seriesModel.getData();
this._symbolDraw.updateData(
var symbolDraw = this._symbolDraw;
var lineDraw = this._lineDraw;
var coordSys = seriesModel.coordinateSystem;
symbolDraw.updateData(
data, seriesModel, api, false
);
lineDraw.updateData(
data.graph.edgeData,
seriesModel, api, false
);
var scalarScale = coordSys && coordSys.getScalarScale();
data.eachItemGraphicEl(function (el, idx) {
el.scale[0] = el.scale[1] = scalarScale;
});
},
remove: function (ecModel, api) {
updateLayout: function (seriesModel, ecModel) {
this._symbolDraw.updateLayout();
this._lineDraw.updateLayout();
},
remove: function (ecModel, api) {
this._symbolDraw.remove();
this._lineDraw.remove();
}
});
});
\ No newline at end of file
define(function (require) {
var graphic = require('../../util/graphic');
function LineDraw() {
this.group = new graphic.Group();
}
var lineDrawProto = LineDraw.prototype;
/**
* @param {module:echarts/data/List} data
* @param {module:echarts/model/Series} seriesModel
* @param {module:echarts/ExtensionAPI} api
* @param {boolean} enableAnimation
*/
lineDrawProto.updateData = function (data, seriesModel, api, enableAnimation) {
var group = this.group;
var oldData = this._data;
data.diff(oldData)
.add(function (idx) {
var shape = data.getItemLayout(idx);
var line = new graphic[shape.cpx1 != null ? 'BezierCurve' : 'Line']({
shape: shape
});
data.setItemGraphicEl(idx, line);
group.add(line);
})
.update(function (newIdx, oldIdx) {
var line = oldData.getItemGraphicEl(oldIdx);
var shape = data.getItemLayout(newIdx);
if (shape.cpx1 != null && shape.type === 'line') {
var oldShape = line.shape;
line = new graphic.BezierCurve({
shape: oldShape
});
line.setShape({
cpx1: (oldShape.x1 + oldShape.x2) / 2,
cpy1: (oldShape.y1 + oldShape.y2) / 2
});
}
api.updateGraphicEl(line, shape);
})
.remove(function (idx) {
group.remove(oldData.getItemGraphicEl(idx));
})
.execute();
this._data = data;
this.updateVisual();
};
lineDrawProto.updateVisual = function () {
var data = this._data;
data.eachItemGraphicEl(function (el, idx) {
var itemModel = data.getItemModel(idx);
el.setStyle(itemModel.getModel('lineStyle.normal').getLineStyle());
});
};
lineDrawProto.updateLayout = function () {
var data = this._data;
data.eachItemGraphicEl(function (el, idx) {
var points = data.getItemLayout(idx);
data.setShape({
x1: points[0][0],
y1: points[0][1],
x2: points[1][0],
y2: points[1][1]
});
});
};
return LineDraw;
});
\ No newline at end of file
......@@ -23,33 +23,26 @@ define(function (require) {
var point = data.getItemLayout(idx);
var color = data.getItemVisual(idx, 'color');
var symbolSize = data.getItemVisual(idx, 'symbolSize');
var size = data.getItemVisual(idx, 'symbolSize');
var symbolType = data.getItemVisual(idx, 'symbol') || 'circle';
if (!symbolType || symbolType === 'none') {
if (symbolType === 'none') {
return;
}
symbolSize = normalizeSymbolSize(symbolSize);
size = normalizeSymbolSize(size);
var x = -symbolSize[0] / 2;
var y = -symbolSize[1] / 2;
var w = symbolSize[0];
var h = symbolSize[1];
var symbolEl = symbolUtil.createSymbol(
symbolType, x, y, w, h, color
symbolType, -size[0] / 2, -size[1] / 2, size[0], size[1], color
);
var symbolElPos = symbolEl.position;
symbolElPos[0] = point[0];
symbolElPos[1] = point[1];
symbolEl.z2 = 100;
symbolEl.attr({
position: point,
z2: 100
});
if (enableAnimation) {
symbolEl.scale = [0, 0];
symbolEl.animateTo({
scale: [1, 1]
}, 500);
......@@ -65,199 +58,178 @@ define(function (require) {
this.group = new graphic.Group();
}
SymbolDraw.prototype = {
getData: function () {
return this._data;
},
/**
* @param {module:echarts/data/List} data
* @param {module:echarts/model/Series} seriesModel
* @param {module:echarts/ExtensionAPI} api
* @param {boolean} enableAnimation
* @param {Array.<boolean>} [ignoreMap]
*/
updateData: function (
data, seriesModel, api, enableAnimation, ignoreMap
) {
var group = this.group;
var oldData = this._data;
data.diff(oldData)
.add(function (newIdx) {
// 空数据
// TODO
if (!data.hasValue(newIdx)) {
return;
}
if (!(ignoreMap && ignoreMap[newIdx])) {
var symbolEl = createSymbol(
data, newIdx, enableAnimation
);
if (symbolEl) {
data.setItemGraphicEl(newIdx, symbolEl);
group.add(symbolEl);
}
}
})
.update(function (newIdx, oldIdx) {
var el = oldData.getItemGraphicEl(oldIdx);
// Empty data
if (!data.hasValue(newIdx)
|| (ignoreMap && ignoreMap[newIdx])
) {
group.remove(el);
return;
var symbolProto = SymbolDraw.prototype;
/**
* @param {module:echarts/data/List} data
* @param {module:echarts/model/Series} seriesModel
* @param {module:echarts/ExtensionAPI} api
* @param {boolean} enableAnimation
* @param {Array.<boolean>} [ignoreMap]
*/
symbolProto.updateData = function (
data, seriesModel, api, enableAnimation, ignoreMap
) {
var group = this.group;
var oldData = this._data;
data.diff(oldData)
.add(function (newIdx) {
if (data.hasValue(newIdx) && !(ignoreMap && ignoreMap[newIdx])) {
var symbolEl = createSymbol(data, newIdx, enableAnimation);
if (symbolEl) {
data.setItemGraphicEl(newIdx, symbolEl);
group.add(symbolEl);
}
}
})
.update(function (newIdx, oldIdx) {
var el = oldData.getItemGraphicEl(oldIdx);
// Empty data
if (!data.hasValue(newIdx) || (ignoreMap && ignoreMap[newIdx])) {
group.remove(el);
return;
}
var symbolSize = normalizeSymbolSize(
data.getItemVisual(newIdx, 'symbolSize')
);
var point = data.getItemLayout(newIdx);
var size = normalizeSymbolSize(
data.getItemVisual(newIdx, 'symbolSize')
);
var point = data.getItemLayout(newIdx);
var symbolType = data.getItemVisual(newIdx, 'symbol');
// Symbol changed
if (
oldData.getItemVisual(oldIdx, 'symbol') !== symbolType
var symbolType = data.getItemVisual(newIdx, 'symbol');
// Symbol changed
if (
oldData.getItemVisual(oldIdx, 'symbol') !== symbolType
|| (!el && !(ignoreMap && ignoreMap[newIdx]))
) {
// Remove the old one
el && group.remove(el);
el = createSymbol(data, newIdx, enableAnimation);
// Disable symbol by setting `symbol: 'none'`
if (!el) {
return;
}
}
else {
// Update animation
if (!el) {
return;
}
var newTarget = {};
if (!isSymbolSizeSame(
symbolSize, normalizeSymbolSize(
oldData.getItemVisual(oldIdx, 'symbolSize')
)
)) {
// FIXME symbol created with pathStr has symbolSizeChanged
newTarget = symbolUtil.getSymbolShape(
symbolType,
-symbolSize[0] / 2, -symbolSize[1] / 2,
symbolSize[0], symbolSize[1]
) || {};
}
// TODO Merge animateTo and attr methods into one
newTarget.position = point;
if (!isAroundEqual(el.scale[0], 1)) { // May have scale 0
newTarget.scale = [1, 1];
}
if (enableAnimation) {
api.updateGraphicEl(el, newTarget);
}
else {
// May still have animation. Must stop
el.stopAnimation();
el.attr(newTarget);
}
) {
// Remove the old one
el && group.remove(el);
el = createSymbol(data, newIdx, enableAnimation);
// Disable symbol by setting `symbol: 'none'`
if (!el) { return; }
}
else {
// Update animation
if (!el) { return; }
var newTarget = {};
if (!isSymbolSizeSame(
size, normalizeSymbolSize(
oldData.getItemVisual(oldIdx, 'symbolSize')
)
)) {
// FIXME symbol created with pathStr has symbolSizeChanged
newTarget = symbolUtil.getSymbolShape(
symbolType, -size[0] / 2, -size[1] / 2, size[0], size[1]
) || {};
}
data.setItemGraphicEl(newIdx, el);
// Add back
group.add(el);
})
.remove(function (oldIdx) {
var el = oldData.getItemGraphicEl(oldIdx);
newTarget.position = point;
if (!isAroundEqual(el.scale[0], 1)) { // May have scale 0
newTarget.scale = [1, 1];
}
if (enableAnimation) {
el.animateTo({
scale: [0, 0]
}, 200, 'cubicOut', function () {
group.remove(el);
});
api.updateGraphicEl(el, newTarget);
}
else {
// console.log(oldIdx);
group.remove(el);
// May still have animation. Must stop
el.stopAnimation();
el.attr(newTarget);
}
})
.execute();
// Update common properties
var normalStyleAccessPath = ['itemStyle', 'normal'];
var emphasisStyleAccessPath = ['itemStyle', 'emphasis'];
data.eachItemGraphicEl(function (el, idx) {
var itemModel = data.getItemModel(idx);
var normalItemStyleModel = itemModel.getModel(normalStyleAccessPath);
var labelModel = itemModel.getModel('label.normal');
var color = data.getItemVisual(idx, 'color');
el.setColor(color);
}
zrUtil.extend(
el.style,
normalItemStyleModel.getItemStyle(['color'])
);
data.setItemGraphicEl(newIdx, el);
if (labelModel.get('show')) {
var labelPosition = labelModel.get('position') || 'inside';
var labelColor = labelPosition === 'inside' ? 'white' : color;
// Text use the value of last dimension
var lastDim = data.dimensions[data.dimensions.length - 1];
el.setStyle({
// FIXME
text: seriesModel.getFormattedLabel(idx, 'normal')
|| data.get(lastDim, idx),
textFont: labelModel.getModel('textStyle').getFont(),
textPosition: labelPosition,
textFill: labelColor
// Add back
group.add(el);
})
.remove(function (oldIdx) {
var el = oldData.getItemGraphicEl(oldIdx);
if (enableAnimation) {
el.animateTo({
scale: [0, 0]
}, 200, 'cubicOut', function () {
group.remove(el);
});
}
else {
// console.log(oldIdx);
group.remove(el);
}
})
.execute();
// Update common properties
var normalStyleAccessPath = ['itemStyle', 'normal'];
var emphasisStyleAccessPath = ['itemStyle', 'emphasis'];
data.eachItemGraphicEl(function (el, idx) {
var itemModel = data.getItemModel(idx);
var normalItemStyleModel = itemModel.getModel(normalStyleAccessPath);
var labelModel = itemModel.getModel('label.normal');
var color = data.getItemVisual(idx, 'color');
el.setColor(color);
zrUtil.extend(
el.style,
normalItemStyleModel.getItemStyle(['color'])
);
if (labelModel.get('show')) {
var textStyleModel = labelModel.getModel('textStyle');
var labelPosition = labelModel.get('position') || 'inside';
var labelColor = labelPosition === 'inside' ? 'white' : color;
// Text use the value of last dimension
var lastDim = data.dimensions[data.dimensions.length - 1];
el.setStyle({
// FIXME
text: seriesModel.getFormattedLabel(idx, 'normal')
|| data.get(lastDim, idx),
textFont: textStyleModel.getFont(),
textPosition: labelPosition,
textFill: textStyleModel.get('color') || labelColor
});
}
graphic.setHoverStyle(
el,
itemModel.getModel(emphasisStyleAccessPath).getItemStyle()
);
}, this);
graphic.setHoverStyle(
el,
itemModel.getModel(emphasisStyleAccessPath).getItemStyle()
);
}, this);
this._data = data;
},
this._data = data;
};
updateLayout: function () {
var data = this._data;
if (data) {
// Not use animation
data.eachItemGraphicEl(function (el, idx) {
el.attr('position', data.getItemLayout(idx));
symbolProto.updateLayout = function () {
var data = this._data;
if (data) {
// Not use animation
data.eachItemGraphicEl(function (el, idx) {
el.attr('position', data.getItemLayout(idx));
});
}
};
symbolProto.remove = function (enableAnimation) {
var group = this.group;
var data = this._data;
if (data) {
if (enableAnimation) {
data.eachItemGraphicEl(function (el) {
el.animateTo({
scale: [0, 0]
}, 200, 'cubicOut', function () {
group.remove(el);
});
});
}
},
remove: function (enableAnimation) {
var group = this.group;
var data = this._data;
if (data) {
if (enableAnimation) {
data.eachItemGraphicEl(function (el) {
el.animateTo({
scale: [0, 0]
}, 200, 'cubicOut', function () {
group.remove(el);
});
});
}
else {
group.removeAll();
}
else {
group.removeAll();
}
}
}
};
return SymbolDraw;
});
\ No newline at end of file
......@@ -201,7 +201,7 @@ define(function(require) {
if (stackedOn) {
var stackedOnSeries = stackedOn.hostModel;
stackedOnSmooth = getSmooth(stackedOnSeries.get('smooth'))
stackedOnSmooth = getSmooth(stackedOnSeries.get('smooth'));
}
polygonShape.stackedOnSmooth = stackedOnSmooth;
......
......@@ -30,7 +30,7 @@ define(function (require) {
}
})
: group.off('click');
};
}
function updateMapSelected(mapOrGeoModel, data) {
data.eachItemGraphicEl(function (el, idx) {
......@@ -181,12 +181,12 @@ define(function (require) {
scale: [1 / scale[0], 1 / scale[1]],
z2: 10
});
function emphasisLabel() {
var emphasisLabel = function() {
text.attr('ignore', !hoverShowLabel);
}
function normalLabel() {
};
var normalLabel = function() {
text.attr('ignore', !showLabel);
}
};
regionGroup.on('mouseover', emphasisLabel)
.on('mouseout', normalLabel)
.on('emphasis', emphasisLabel)
......@@ -262,7 +262,7 @@ define(function (require) {
controller.rect = geo.getViewRect();
}
}
};
return MapDraw;
});
\ No newline at end of file
......@@ -37,7 +37,7 @@ define(function (require) {
this._roamTransform = new TransformDummy();
this._viewTransform = new TransformDummy();
};
}
View.prototype = {
......@@ -180,6 +180,16 @@ define(function (require) {
return invTransform
? vector.applyTransform([], point, invTransform)
: point.slice();
},
/**
* @return {number}
*/
getScalarScale: function () {
// Use determinant square root of transform to mutiply scalar
var m = this.transform;
var det = Math.sqrt(Math.abs(m[0] * m[3] - m[2] * m[1]));
return det;
}
};
......
......@@ -33,7 +33,7 @@ define(function (require) {
this._nameCoordMap = {};
this.loadGeoJson(geoJson);
};
}
Geo.prototype = {
......
......@@ -64,32 +64,32 @@ define(function(require) {
/**
* Add a new node
* @param {string} name
* @param {string} id
* @param {number} [dataIndex]
*/
graphProto.addNode = function (name, dataIndex) {
graphProto.addNode = function (id, dataIndex) {
var nodesMap = this._nodesMap;
if (nodesMap[name]) {
return nodesMap[name];
if (nodesMap[id]) {
return nodesMap[id];
}
var node = new Node(name, dataIndex);
var node = new Node(id, dataIndex);
node.hostGraph = this;
this.nodes.push(node);
nodesMap[name] = node;
nodesMap[id] = node;
return node;
};
/**
* Get node by name
* @param {string} name
* Get node by id
* @param {string} id
* @return {module:echarts/data/Graph.Node}
*/
graphProto.getNodeByName = function (name) {
return this._nodesMap[name];
graphProto.getNodeById = function (id) {
return this._nodesMap[id];
};
/**
......@@ -113,12 +113,13 @@ define(function(require) {
return;
}
var key = n1.name + '-' + n2.name;
var key = n1.id + '-' + n2.id;
if (edgesMap[key]) {
return edgesMap[key];
}
var edge = new Edge(n1, n2, dataIndex);
edge.hostGraph = this;
if (this._directed) {
n1.outEdges.push(edge);
......@@ -143,10 +144,10 @@ define(function(require) {
*/
graphProto.getEdge = function (n1, n2) {
if (typeof(n1) !== 'string') {
n1 = n1.name;
n1 = n1.id;
}
if (typeof(n2) !== 'string') {
n2 = n2.name;
n2 = n2.id;
}
var edgesMap = this._edgesMap;
......@@ -269,11 +270,11 @@ define(function(require) {
var nodes = this.nodes;
var edges = this.edges;
for (var i = 0; i < nodes.length; i++) {
graph.addNode(nodes[i].name, nodes[i].dataIndex);
graph.addNode(nodes[i].id, nodes[i].dataIndex);
}
for (var i = 0; i < edges.length; i++) {
var e = edges[i];
graph.addEdge(e.node1.name, e.node2.name, e.dataIndex);
graph.addEdge(e.node1.id, e.node2.id, e.dataIndex);
}
return graph;
};
......@@ -282,11 +283,11 @@ define(function(require) {
/**
* @alias module:echarts/data/Graph.Node
*/
function Node(name, dataIndex) {
function Node(id, dataIndex) {
/**
* @type {string}
*/
this.name = name || '';
this.id = id || '';
/**
* @type {Array.<module:echarts/data/Graph.Edge>}
......@@ -309,7 +310,7 @@ define(function(require) {
* @type {number}
*/
this.dataIndex = dataIndex == null ? -1 : dataIndex;
};
}
Node.prototype = {
......@@ -348,57 +349,6 @@ define(function(require) {
var itemModel = graph.data.getItemModel(this.dataIndex);
return itemModel.getModel(path);
},
// Proxy methods
/**
* @param {string=} [dimension='value'] Default 'value'. can be 'a', 'b', 'c', 'd', 'e'.
* @return {number}
*/
getValue: function (dimension) {
return this.hostTree.data.get(dimension || 'value', this.dataIndex);
},
/**
* @param {Object|string} key
* @param {*} [value]
*/
setVisual: function (key, value) {
this.dataIndex >= 0
&& this.hostGraph.data.setItemVisual(this.dataIndex, key, value);
},
/**
* @param {string} key
* @return {boolean}
*/
getVisual: function (key, ignoreParent) {
return this.hostGraph.data.getItemVisual(this.dataIndex, key, ignoreParent)
},
/**
* @param {Object} layout
* @return {boolean} [merge=false]
*/
setLayout: function (layout, merge) {
this.dataIndex >= 0
&& this.hostGraph.data.setItemLayout(this.dataIndex, layout, merge);
},
/**
* @return {Object}
*/
getLayout: function () {
return this.hostGraph.data.getItemLayout(this.dataIndex);
},
/**
* @return {number}
*/
getRawIndex: function () {
return this.hostGraph.data.getRawIndex(this.dataIndex);
}
};
......@@ -424,8 +374,77 @@ define(function(require) {
this.node2 = n2;
this.dataIndex = dataIndex == null ? -1 : dataIndex;
}
/**
* @param {string} [path]
* @return {module:echarts/model/Model}
*/
Edge.prototype.getModel = function (path) {
if (this.dataIndex < 0) {
return;
}
var graph = this.hostGraph;
var itemModel = graph.data.getItemModel(this.dataIndex);
return itemModel.getModel(path);
};
var createGraphDataProxyMixin = function (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);
},
/**
* @param {Object|string} key
* @param {*} [value]
*/
setVisual: function (key, value) {
this.dataIndex >= 0
&& this.hostGraph[dataName].setItemVisual(this.dataIndex, key, value);
},
/**
* @param {string} key
* @return {boolean}
*/
getVisual: function (key, ignoreParent) {
return this.hostGraph[dataName].getItemVisual(this.dataIndex, key, ignoreParent);
},
/**
* @param {Object} layout
* @return {boolean} [merge=false]
*/
setLayout: function (layout, merge) {
this.dataIndex >= 0
&& this.hostGraph[dataName].setItemLayout(this.dataIndex, layout, merge);
},
/**
* @return {Object}
*/
getLayout: function () {
return this.hostGraph[dataName].getItemLayout(this.dataIndex);
},
/**
* @return {number}
*/
getRawIndex: function () {
return this.hostGraph[dataName].getRawIndex(this.dataIndex);
}
};
};
zrUtil.mixin(Node, createGraphDataProxyMixin('data'));
zrUtil.mixin(Edge, createGraphDataProxyMixin('edgeData'));
Graph.Node = Node;
Graph.Edge = Edge;
......
......@@ -30,7 +30,7 @@ define(function(require) {
var attributes = parseAttributes(getChildByTagName(graphRoot, 'attributes'));
var attributesMap = {};
for (var i = 0; i < attributes.length; i++) {
attributesMap[attributes[i].name] = attributes[i];
attributesMap[attributes[i].id] = attributes[i];
}
return {
......@@ -42,9 +42,9 @@ define(function(require) {
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')
id: getAttr(attribDom, 'id'),
title: getAttr(attribDom, 'title'),
type: getAttr(attribDom, 'type')
};
}) : [];
}
......@@ -52,11 +52,12 @@ define(function(require) {
function parseNodes(parent, attributesMap) {
return parent ? zrUtil.map(getChildrenByTagName(parent, 'node'), function (nodeDom) {
var id = nodeDom.getAttribute('id');
var label = nodeDom.getAttribute('label');
var id = getAttr(nodeDom, 'id');
var label = getAttr(nodeDom, 'label');
var node = {
name: id,
id: id,
name: label,
label: {
normal: {
formatter: label
......@@ -70,28 +71,28 @@ define(function(require) {
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 vizShapeDom = getChildByTagName(nodeDom, 'viz:shape');
var attvaluesDom = getChildByTagName(nodeDom, 'attvalues');
if (vizSizeDom) {
node.itemStyle.normal.symbolSize = parseFloat(vizSizeDom.getAttribute('value'));
node.symbolSize = parseFloat(getAttr(vizSizeDom, 'value'));
}
if (vizPosDom) {
node.x = parseFloat(vizPosDom.getAttribute('x'));
node.y = parseFloat(vizPosDom.getAttribute('y'));
node.x = parseFloat(getAttr(vizPosDom, 'x'));
node.y = parseFloat(getAttr(vizPosDom, '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');
node.itemStyle.normal.color = 'rgb(' +[
getAttr(vizColorDom, 'r') | 0,
getAttr(vizColorDom, 'g') | 0,
getAttr(vizColorDom, 'b') | 0
].join(',') + ')';
}
// if (vizShapeDom) {
// node.shape = getAttr(vizShapeDom, 'shape');
// }
if (attvaluesDom) {
var attvalueDomList = getChildrenByTagName(attvaluesDom, 'attvalue');
......@@ -99,8 +100,8 @@ define(function(require) {
for (var j = 0; j < attvalueDomList.length; j++) {
var attvalueDom = attvalueDomList[j];
var attId = attvalueDom.getAttribute('for');
var attValue = attvalueDom.getAttribute('value');
var attId = getAttr(attvalueDom, 'for');
var attValue = getAttr(attvalueDom, 'value');
var attribute = attributesMap[attId];
if (attribute) {
......@@ -129,14 +130,15 @@ define(function(require) {
function parseEdges(parent) {
return parent ? zrUtil.map(getChildrenByTagName(parent, 'edge'), function (edgeDom) {
var id = edgeDom.getAttribute('id');
var label = edgeDom.getAttribute('label');
var id = getAttr(edgeDom, 'id');
var label = getAttr(edgeDom, 'label');
var sourceId = edgeDom.getAttribute('source');
var targetId = edgeDom.getAttribute('target');
var sourceId = getAttr(edgeDom, 'source');
var targetId = getAttr(edgeDom, 'target');
var edge = {
name: id,
id: id,
name: label,
source: sourceId,
target: targetId,
linkStyle: {
......@@ -148,16 +150,16 @@ define(function(require) {
var vizThicknessDom = getChildByTagName(edgeDom, 'viz:thickness');
var vizColorDom = getChildByTagName(edgeDom, 'viz:color');
var vizShapeDom = getChildByTagName(edgeDom, 'viz:shape');
// 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'))
getAttr(vizColorDom, 'r') | 0,
getAttr(vizColorDom, 'g') | 0,
getAttr(vizColorDom, 'b') | 0
].join(',') + ')';
}
// if (vizShapeDom) {
......@@ -168,6 +170,10 @@ define(function(require) {
}) : [];
}
function getAttr(el, attrName) {
return el.getAttribute(attrName);
}
function getChildByTagName (parent, tagName) {
var node = parent.firstChild;
......
......@@ -27,6 +27,8 @@ define(function(require) {
graphic.Line = require('zrender/graphic/shape/Line');
graphic.BezierCurve = require('zrender/graphic/shape/BezierCurve');
graphic.Arc = require('zrender/graphic/shape/Arc');
/**
......
......@@ -39,7 +39,7 @@ define(function (require) {
= chartProto.updateVisual
= function (seriesModel, ecModel, api, payload) {
this.render(seriesModel, ecModel, api, payload);
}
};
// Enable Chart.extend.
componentUtil.enableClassExtend(Chart);
......
......@@ -34,7 +34,7 @@ define(function (require) {
= componentProto.updateVisual
= function (seriesModel, ecModel, api, payload) {
// Do nothing;
}
};
// Enable Component.extend.
componentUtil.enableClassExtend(Component);
......
define(function (require) {
function isSymbolNone(symbolType) {
return symbolType === 'none';
}
return function (seriesType, defaultSymbolType, legendSymbol, ecModel, api) {
// Encoding visual for all series include which is filtered for legend drawing
......@@ -9,6 +13,8 @@ define(function (require) {
var symbolType = seriesModel.get('symbol') || defaultSymbolType;
var symbolSize = seriesModel.get('symbolSize');
// var coordSys = seriesModel.coordinateSystem;
data.setVisual({
legendSymbol: legendSymbol || symbolType,
symbol: symbolType,
......@@ -20,16 +26,18 @@ define(function (require) {
if (typeof symbolSize === 'function') {
data.each(function (idx) {
var rawValue = data.getRawValue(idx);
data.setItemVisual(idx, 'symbolSize', symbolSize(rawValue))
data.setItemVisual(idx, 'symbolSize', symbolSize(rawValue));
});
}
data.each(function (idx) {
var itemModel = data.getItemModel(idx);
var symbolType = itemModel.get('symbol', true);
var symbolSize = itemModel.get('symbolSize', true);
if (symbolType != null && symbolType !== 'none') {
// If has symbol
if (!isSymbolNone(defaultSymbolType) || !isSymbolNone(defaultSymbolType)) {
data.setItemVisual(idx, 'symbol', symbolType);
if (symbolSize != null) {
// PENDING Transform symbolSize ?
data.setItemVisual(idx, 'symbolSize', symbolSize);
}
}
......
......@@ -39,20 +39,33 @@
$.get('./data/les-miserables.gexf', function (xml) {
var graph = gexf.parse(xml);
graph.nodes.forEach(function (node) {
node.itemStyle = null;
node.value = 1;
node.label.normal.show = node.symbolSize > 30;
});
chart.setOption({
tooltip: {},
series : [
{
name: 'iphone3',
name: 'les-miserables',
type: 'graph',
data: graph.nodes,
links: graph.links
links: graph.links,
label: {
normal: {
position: 'right'
}
},
lineStyle: {
normal: {
curveness: 0.3
}
}
}
]
});
});
})
});
</script>
</body>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册