访问raphael js中集合内的集合 [英] accessing a set inside a set in raphael js

问题描述

我正在使用raphael js创建一个小信息图。信息图表将呈现一些内部带有一些文本的圆圈。圆圈的数量是不知道的，并且将取决于它被喂食的数据。

I'm in the process of creating a little 'infographic' using raphael js. The infographic will render a number of circles with some text inside. The number of circles isn't know and will depend on the data it gets fed.

我以为我会将raphael对象组织成集合，每个圆圈和然后将这些集合移动到一个容器集中，但是我无法使用以下内容以编程方式访问它们：

I thought that I would organise the raphael objects into sets, one for each circle and then move those sets into one 'container' set but I am having trouble accessing them programatically using something like:

console.log(ss[0].circle);

这是我用来绘制圆圈的代码片段/将它们添加到集合中： / p>

Here is a snippet of the code im using to draw my circles/add them to a set:

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

有人能指出我正确的方向吗？

Can someone point me in the right direction?

推荐答案

因此，请确保我理解正确：

So let me make sure I understand you correctly:

您希望能够：

（1）通过更新一个设置对象，同时更改所有圆圈的属性。例如

(1) change properties on all of the circles at the same time by updating one set object. For example

ss.translate(10,10)

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

moves all of the circles 10px right and 10px down.

（2）更改各个圆圈的属性以移动圆圈（以及相关的路径和文本元素）。

(2) change properties on individual circles to move the circle (and it's associated path and text elements).

ss[0].move(10, 10)

仅移动第一个圆圈。

以下是否达到了您想要的效果？

Does the following accomplish what you want?

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

然后您可以一次移动所有圈子：

You can then move all of the circles at once by:

allCircles.translate(10, 10);

并移动个别圈子：

circles[0].translate(10, 10);

我是否理解您要正确完成的工作？

Am I understanding what you're trying to accomplish correctly?

这篇关于访问raphael js中集合内的集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！