라파즈 js의 세트 안에있는 세트에 액세스하기

Question

나는 라파엘 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

아마도 외부 세트를 평면의 오래된 자바 스크립트 배열로 만들고 각 세트를 루프로 렌더링합니다.

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