Question

I’m in the process of creating a little ‘infographic’ using raphael js. The infographic will render a number of circles with some text inside. The number of circles isn’t know and will depend on the data it gets fed.

I thought that I would organise the raphael objects into sets, one for each circle and then move those sets into one ‘container’ set but I am having trouble accessing them programatically using something like:

console.log(ss[0].circle);

Here is a snippet of the code im using to draw my circles/add them to a set:

var r = Raphael('raph', '500px', '500px');

var coord = {
'0': {x: 177, y: 75},
'1': {x: 420, y: 173},
'2': {x: 177, y: 415}
};

var ss = r.set();

for(var i=0; i < data.values.length; i++){
    var s = r.set();

    s.push(r.path("M "+ coord[i].x +" "+ coord[i].y +" L 247 247 z"));
    s.push(r.circle(coord[i].x, coord[i].y, 50).attr({fill: '#fff', stroke: '#00adef', 'stroke-width': 2}));
    s.push(r.text(coord[i].x, coord[i].y-41).attr({'font': '12px Arial', 'font-weight': 'bold', fill: '#474747', text: data.values[i].name}));
    s.push(r.text(coord[i].x, coord[i].y-19).attr({'font': '28px Arial', 'font-weight': 'bold', fill: '#00adef', text: data.values[i].grade}));

    ss.push(s);
}

Can someone point me in the right direction?

Answer 1

So let me make sure I understand you correctly:

You want to be able to:

(1) change properties on all of the circles at the same time by updating one set object. For example

ss.translate(10,10)

moves all of the circles 10px right and 10px down.

(2) change properties on individual circles to move the circle (and it’s associated path and text elements).

ss[0].move(10, 10)

moves the first circle only.

Does the following accomplish what you want?

var allCircles = r.set();
var circles = [];

for(var i=0; i < data.values.length; i++){
    var s = r.set();

    s.push(r.path("M "+ coord[i].x +" "+ coord[i].y +" L 247 247 z"));
    s.push(r.circle(coord[i].x, coord[i].y, 50).attr({fill: '#fff', stroke: '#00adef', 'stroke-width': 2}));
    s.push(r.text(coord[i].x, coord[i].y-41).attr({'font': '12px Arial', 'font-weight': 'bold', fill: '#474747', text: data.values[i].name}));
    s.push(r.text(coord[i].x, coord[i].y-19).attr({'font': '28px Arial', 'font-weight': 'bold', fill: '#00adef', text: data.values[i].grade}));

    circles.push(s);
    for(var j = 0; j < s.length; j++) {
        allCircles.push(s[j]);
    }
}

You can then move all of the circles at once by:

allCircles.translate(10, 10);

and move an individual circle by:

circles[0].translate(10, 10);

Am I understanding what you’re trying to accomplish correctly?