accéder à un ensemble dans un ensemble dans raphael js

Question

Je suis en train de créer un petit 'infographique' en utilisant raphael js. L'infographie rendra un certain nombre de cercles avec du texte à l'intérieur. Le nombre de cercles n'est pas connu et dépendra des données qu'il reçoit.

Je pensais que j'organiser les objets raphael en ensembles, un pour chaque cercle, puis déplacer ces ensembles dans un « conteneur » mis mais je ne parviens pas à y accéder programatically en utilisant quelque chose comme:

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

Voici un extrait du code im utilisant pour dessiner mes cercles/les ajouter à un ensemble:

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); 
} 

quelqu'un peut me diriger dans la bonne direction?

Answer 1

-moi donc assurez-vous que je vous comprends bien:

Vous voulez être en mesure de:

(1) propriétés de changement sur tous les cercles en même temps en mettant à jour un objet défini. Par exemple

ss.translate(10,10) 

déplace tous les cercles 10px vers la droite et 10px vers le bas. (2) modifier les propriétés des cercles individuels pour déplacer le cercle (ainsi que les éléments de chemin et de texte associés).

ss[0].move(10, 10) 

déplace le premier cercle uniquement.

Est-ce que ce qui suit accomplit ce que vous voulez?

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]); 
    } 
} 

Vous pouvez ensuite déplacer tous les cercles à la fois par:

allCircles.translate(10, 10); 

et déplacer un cercle individuel par:

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

Suis-je comprendre ce que vous essayez d'accomplir correctement?

Answer 2

Peut-être faire de l'ensemble externe un tableau javascript ancien plan, et rendre chaque ensemble dans une boucle.

Answer 3

J'ai pris le code de bbrame et joué avec. Deux choses que j'ai apprises:

• Vous pouvez avoir des ensembles imbriqués (un ensemble d'ensembles).
• Vous pouvez consulter les articles dans un jeu comme vous faites référence à des éléments dans un tableau ...

-à-dire,

circle_set[2]; 

Voilà comment je l'ai testé:

// 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);