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

我是否理解您要正确完成的任务？