Question

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

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

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

我拿了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数组，并在循环中渲染每个集合。

访问raphael js中集合内的集合

3 个答案: