访问raphael js中的集合集合

Question

我正在使用raphael js创建一个“信息图”的过程。该信息图将呈现一些带有一些文字的圆圈。圆圈的数量不知道，取决于它获得的数据。

我以为我会组织拉斐尔对象成组，每一个圆，然后将这些设置成集，但我无法访问它们编程方式使用像一个“容器”：

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

这里是一段代码即时通讯使用绘制我的圈子/添加到一组：

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

有人可以指出我在正确的方向吗？

Answer 1

因此，让我知道我理解你正确：

你要能够：

（1）通过更新一个对象的所有在同一时间圆的变化性。例如，

ss.translate(10,10) 

将所有的圆圈向右移动10px，向下移动10px。

（2）更改各个圆圈上移动圆圈的属性（以及它的相关路径和文本元素）。

ss[0].move(10, 10) 

仅移动第一个圆。

以下是否完成你想要的？

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

然后，您可以将所有圆的一次是：

allCircles.translate(10, 10); 

和移动个人圈：

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

难道我理解你想实现什么是否正确？

Answer 2

也许让外面的设置一个平面旧的javascript数组，并渲染每个集合在一个循环中。

Answer 3

我拿了bbrame的代码，并与它一起玩。我学到的两件事：

• 你可以有嵌套集合（一组集合）。
• 您可以参考的项目在一组，就像你是指项目在数组...

即

circle_set[2]; 

以下是我测试：

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