--- a/integration/js/streamgraph.js Tue Oct 16 14:31:59 2012 +0200
+++ b/integration/js/streamgraph.js Tue Oct 23 14:57:27 2012 +0200
@@ -50,33 +50,35 @@
xscale = width / (transp.length - 1),
txscale = width / (ENDTIME - STARTTIME),
coords = _(data).map(function(line, lineindex) {
- return _(line).map(function(point, colindex) {
- var lowercumul = lineindex ? cumulative[colindex][lineindex - 1] : 0,
- uppercumul = cumulative[colindex][lineindex];
- return {
- data: point,
- x: xscale * colindex,
- lowery: centery + yscale * ( ( sums[colindex] / 2 ) - lowercumul ),
- uppery: centery + yscale * ( ( sums[colindex] / 2 ) - uppercumul ),
- }
- });
+ return {
+ points : _(line).map(function(point, colindex) {
+ var lowercumul = lineindex ? cumulative[colindex][lineindex - 1] : 0,
+ uppercumul = cumulative[colindex][lineindex];
+ return {
+ data: point,
+ x: xscale * colindex,
+ lowery: centery + yscale * ( ( sums[colindex] / 2 ) - lowercumul ),
+ uppery: centery + yscale * ( ( sums[colindex] / 2 ) - uppercumul ),
+ }
+ })
+ }
}),
- paths = _(coords).map(function(line) {
- var lowerline = _(line).reduce(function(path, point, colindex) {
+ _(coords).each(function(line) {
+ var lowerline = _(line.points).reduce(function(path, point, colindex) {
var res = path;
if (colindex) {
res += "," + (point.x - CURVE * xscale) + "," + point.lowery + "," + point.x + "," + point.lowery;
} else {
res += "M" + point.x + "," + point.lowery;
}
- if (colindex < line.length - 1) {
+ if (colindex < line.points.length - 1) {
res += "C" + (point.x + CURVE * xscale) + "," + point.lowery;
}
return res;
}, "");
- var upperline = _(line).reduceRight(function(path, point, colindex) {
+ var upperline = _(line.points).reduceRight(function(path, point, colindex) {
var res = path;
- if (colindex < line.length - 1) {
+ if (colindex < line.points.length - 1) {
res += "," + (point.x + CURVE * xscale) + "," + point.uppery + "," + point.x + "," + point.uppery;
} else {
res += "L" + point.x + "," + point.uppery;
@@ -86,19 +88,19 @@
}
return res;
}, "");
- return lowerline + upperline;
+ line.path = lowerline + upperline;
});
/* Drawing streamgraph*/
var paper = new Raphael($selector[0]);
- _(paths).each(function(path, index) {
- var color = COLORS[index % COLORS.length],
- p = paper.path(path);
- p.attr({
+ _(coords).each(function(line, index) {
+ line.color = COLORS[index % COLORS.length];
+ line.surface = paper.path(line.path);
+ line.surface.attr({
stroke: "none",
- fill: color
+ fill: line.color
});
});
@@ -156,19 +158,20 @@
/* Redrawing time slices for rollover effect */
- _(paths).each(function(path, index) {
- var p = paper.path(path);
- p.attr({
+ _(coords).each(function(line, index) {
+ line.mousesurface = paper.path(line.path);
+ console.log(line.mousesurface);
+ line.mousesurface.attr({
stroke: "none",
- fill: SELECTEDCOLOR,
+ fill: line.color,
opacity: .01
}).mouseover(function() {
- p.attr({
- opacity: 1
- });
+ line.surface.attr({
+ fill: SELECTEDCOLOR
+ })
}).mouseout(function() {
- p.attr({
- opacity: .01
+ line.surface.attr({
+ fill: line.color
})
});
});