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?

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?

• javascript
• svg
• raphael

Share Improve this question Follow edited Feb 10, 2011 at 16:29 boz asked Feb 10, 2011 at 16:24 bozboz 4,90755 gold badges4444 silver badges7070 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 acplish 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 acplish correctly?

I took bbrame's code and played with it. Two things I learned:

• You can have nested sets (a set of sets).
• You can refer to the items in a set just like you refer to items in an array...

i.e.,

circle_set[2];

Here's how I tested:

// the set of sets
circ_set = paper.set();

for (i=1; i<21; i++) {

    // an empty set
    var circ = paper.set();

    // add some concentric circles to the set
    circ.push(
        paper.circle(150+10*i, 50, 9).attr({fill: 'green'}),
        paper.circle(150+10*i, 50, 7).attr({fill: 'yellow'}),
        paper.circle(150+10*i, 50, 5).attr({fill: 'orange'}),
        paper.circle(150+10*i, 50, 3).attr({fill: 'red'})
    );

    // give all the circles a white outline
    circ.attr({stroke: 'white'});

    // add each set of circles to a new set (a set of sets)
    circ_set.push(circ);
}

// translate a single set of circles
circ_set[0].translate(0,10);

// translate all sets of circles
circ_set.translate(0,10);

Perhaps make the outer set a plane old javascript array, and render each set in a loop.