Author: marekz
Date: 2011-08-18 09:07:33 -0700 (Thu, 18 Aug 2011)
New Revision: 26596
Modified:
cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/cytoscapeweb-svg.js
cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/main.html
Log:
Modified visual mappers
Modified: cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/cytoscapeweb-svg.js
===================================================================
--- cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/cytoscapeweb-svg.js
2011-08-18 02:54:19 UTC (rev 26595)
+++ cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/cytoscapeweb-svg.js
2011-08-18 16:07:33 UTC (rev 26596)
@@ -21,7 +21,6 @@
elem.setAttribute(attribute, value);
}
}
-
};
@@ -583,7 +582,7 @@
var node = this.addNode(nodes[i].id);
node.setStyles(nodes[i].style);
node.setPosition(nodes[i].x, nodes[i].y);
- //node.setLabel(nodes[i].label);
+ node._data = nodes[i].data || {};
}
for (var j = 0, len = edges.length; j < len; j++) {
@@ -591,7 +590,7 @@
var target = this.getNode(edges[j].target);
var edge = this.addEdge(edges[j].id, source, target);
edge.setStyles(edges[j].style);
- //edge.setLabel(edges[j].label);
+ edge._data = edges[i].data || {};
}
};
@@ -727,7 +726,7 @@
throw "No such property: " + property;
}
if (typeof prop == "function") {
- prop = prop(this);
+ prop = prop(this._data);
}
return prop;
};
@@ -798,13 +797,8 @@
}
};
- this._data = {};
- this._dataProxyFields = {"id": "_id", "x": "_x", "y": "_y"};
this.data = function(field, value) {
if (arguments.length >= 2) {
- if (field in this._dataProxyFields) {
- throw "Cannot modify field"
- }
this._data[field] = value;
};
if (arguments.length == 1) {
@@ -825,6 +819,7 @@
this._elem = null;
this._labelElem = null;
this._group = "node";
+ this._data = {};
this._listeners = {};
this._eventTypes = ["dragStart", "dragEnd", "hoverStart", "hoverEnd",
"click", "select", "deselect"];
this._label = function() { return this._id; };
@@ -1110,6 +1105,7 @@
this._group = "edge";
this._offset = 0; // Offset used for drawing multiple edges between two
nodes
this._label = function() {return this._id};
+ this._data = {};
this._listeners = {};
// Necessary values
@@ -1360,10 +1356,12 @@
function ContinuousVisualMapper(fieldName, inputMin, inputMax, outputMin,
outputMax) {
return function(data) {
var input = data[fieldName];
- var p = (input - min)/max;
+ var p = (input - inputMin)/inputMax;
if (p < 0) p = 0;
if (p > 1) p = 1;
+
return (p * outputMax) + outputMin;
+
};
}
Modified: cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/main.html
===================================================================
--- cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/main.html 2011-08-18
02:54:19 UTC (rev 26595)
+++ cytoscapeweb/branches/gsoc2011/cytoscapeweb-svg/main.html 2011-08-18
16:07:33 UTC (rev 26596)
@@ -38,11 +38,11 @@
size: 20,
color: "#d0d0f0",
borderColor: "#666666",
- borderWidth: 1.8,
+ borderWidth: 2,
opacity: 1,
},
edges: {
-
+ width: 2
}
}
@@ -52,15 +52,15 @@
backgroundColor: "#fcfcfc"
},
nodes: {
- color: distanceMapper,
- size: 14,
+ color: "#f0f8ff",
+ size: ContinuousVisualMapper("weight",
0, 100, 8, 20),
borderWidth: 2,
borderColor: "#707070",
labelColor: "none"
},
edges: {
- width: 3,
- color: "#909090",
+ width: 2,
+ color: "#909090"
}
}
@@ -71,13 +71,14 @@
},
nodes: {
color: "#d0d0f0",
- opacity: 0.8,
- borderWidth: 4,
+ size: 14,
+ opacity: 0.5,
+ borderWidth: 2,
borderColor: "#303060",
},
edges: {
- color: lengthMapper,
- width: 4
+ color: "#a0a0a0",
+ width: ContinuousVisualMapper("weight",
0, 100, 1, 4)
}
}
@@ -468,12 +469,25 @@
window.onload = function() {
vis = new Visualization("container-div", 640,
640);
load("petersenGraph");
+ addRandomData();
setstyle("basicStyle");
}
+ function addRandomData() {
+ var nodes = vis.getNodes();
+ for (var i = 0; i < nodes.length; i++) {
+ nodes[i].data("weight",
Math.floor(Math.random() * 100));
+ }
+ var edges = vis.getEdges();
+ for (var i = 0; i < edges.length; i++) {
+ edges[i].data("weight",
Math.floor(Math.random() * 100));
+ }
+ }
+
+
+ var ps; // arbor.ParticleSystem
+
// Load a graph
- var ps; // arbor.ParticleSystem
-
function load(graph) {
vis._clearSimulation();
vis.loadGraph(graphs[graph]);
@@ -495,7 +509,7 @@
}
-
+ /*
function lengthMapper (i) {
var dx = i._source._x - i._target._x;
var dy = i._source._y - i._target._y;
@@ -514,6 +528,7 @@
return "rgb(" + dist + ", " + dist + ", " +
dist + ")";
}
+ */
@@ -547,8 +562,8 @@
Load style:
<select
onchange="setstyle(this.options[selectedIndex].value)">
<option selected value="basicStyle">Basic
Style</option>
- <option value="demoStyle">Style with node
visual mapper</option>
- <option value="darkStyle">Style with edge
length mapper</option>
+ <option value="demoStyle">Style with node size
mapper</option>
+ <option value="darkStyle">Style with edge width
mapper</option>
</select>
--
You received this message because you are subscribed to the Google Groups
"cytoscape-cvs" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/cytoscape-cvs?hl=en.
