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

将所有圆圈向右移动 10 像素，向下移动 10 像素。

(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

我拿了 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);

Answer 3

也许将外部集合设置为平面旧的 JavaScript 数组，并在循环中渲染每个集合。