我正在使用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);
}
有人能指出我正确的方向吗?
答案 0 :(得分:4)
所以,让我确保我理解正确:
您希望能够:
(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);
我是否理解您要正确完成的工作?
答案 1 :(得分: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);
答案 2 :(得分:0)
也许将外部设置为一个平面旧的javascript数组,并在循环中渲染每个集合。