訪問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);