For this particular application I am plotting points on a line graph, and these are the numbers used by my function to place the points at the correct locations along the line.
var CustomData = [
[168,36,10,1,"#FFFFFF","#f0e58d"],
[282,31,10,1,"#FFFFFF","#559ab5"],
[338,47,10,1,"#FFFFFF","#f0e58d"],
[448,55,10,1,"#FFFFFF","#559ab5"],
[540,49,10,1,"#FFFFFF","#559ab5"],
[674,27,10,1,"#FFFFFF","#f0e58d"],
[718,24,10,1,"#FFFFFF","#559ab5"],
[846,24,10,1,"#FFFFFF","#f0e58d"],
[1008,35,10,1,"#FFFFFF","#f0e58d"]
];
A description of these values:
CustomData[index][x, y, radius, lineWeight, lineColor, fillColor];
What I'm doing is using the CreateJS library to draw these shapes, and using simple event listeners to detect click events (lines broken for clarity):
for(i = 0; i < this.CustomData.length; i ++) {
var _i = this.CustomData[i];
this.NewShape = new cjs.Shape();
this.NewShape.set({cursor:"pointer"});
this.NewShape.graphics.ss(_i[3]);
this.NewShape.graphics.s(_i[4]);
this.NewShape.graphics.f(_i[5]);
this.NewShape.graphics.dc(_i[0],_i[1],_i[2]);
(function(i,shape,_i){
shape.on("click", function() { DoStuff(i,_i); });
})(i,this.NewShape,_i);
this.addChild(this.NewShape);
}
What I would like to do is expand this routine so that I can use a custom function on each shape, I just don't know how to define a reference to a function inside the array. I also need to be able to pass the iteration and the CustomData element into the function as well.
In theory what I'm imagining is something like:
var CustomData = [
[168,36,10,1,"#FFFFFF","#f0e58d", "DataFunc_A" ],
[282,31,10,1,"#FFFFFF","#559ab5", "DataFunc_B" ],
[338,47,10,1,"#FFFFFF","#f0e58d", "DataFunc_A" ],
[448,55,10,1,"#FFFFFF","#559ab5", "DataFunc_B" ],
[540,49,10,1,"#FFFFFF","#559ab5", "DataFunc_B" ],
[674,27,10,1,"#FFFFFF","#f0e58d", "DataFunc_A" ],
[718,24,10,1,"#FFFFFF","#559ab5", "DataFunc_B" ],
[846,24,10,1,"#FFFFFF","#f0e58d", "DataFunc_A" ],
[1008,35,10,1,"#FFFFFF","#f0e58d", "DataFunc_A" ]
];
And changing the anonymous function within the loop to:
(function(i,shape,_i){
shape.on("click", function() {
window[_i[6]](i,_i);
});
})(i,this.NewShape,_i);
My question: Is this the best most scalable way to achieve this? Are there any "gotchas" that I'll need to keep in mind? Thanks in advance.