доступ к набору внутри набора в Рафаэль JS - PullRequest
Новая
       0

доступ к набору внутри набора в Рафаэль JS

1 голос
/ 10 февраля 2011

Я нахожусь в процессе создания небольшой «инфографики» с использованием 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);
}

Может ли кто-нибудь указать мне правильное направление?

Ответы [ 3 ]

4 голосов
/ 11 февраля 2011

Итак, позвольте мне убедиться, что я вас правильно понимаю:

Вы хотите, чтобы:

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

Я правильно понимаю, что вы пытаетесь выполнить правильно?

2 голосов
/ 05 апреля 2012

Я взял код 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);
0 голосов
/ 10 февраля 2011

Возможно, сделать внешний набор плоским старым массивом javascript и отобразить каждый набор в цикле.

...