Adding an ID to a Raphael circle - graphics

Question

I'm trying to make a drag curver with Raphael.
Please look for this:
r.circle(x, y, 6).attr({
fill: "#ff0000",
stroke: "none",
id: "cir1"
}),
This is my code:
$(document).ready(function() {
var r = Raphael("holder", 1583, 600),
discattr = {
fill: "#ff0000",
stroke: "none"
};
r.rect(9950, 9990, 6199, 4199, 9910, 777777777777).attr({
stroke: "#000000"
});
r.text(310, 20, "").attr({
fill: "#fff",
"font-size": 16
});
function curve(x, y, ax, ay, bx, by, zx, zy, color) {
var path = [["M", x, y], ["C", ax, ay, bx, by, zx, zy]],
path2 = [["M", x, y], ["L", ax, ay], ["M", bx, by], ["L", zx, zy]],
curve = r.path(path).attr({
stroke: color || Raphael.getColor(),
"stroke-width": 4,
"id": "path"
}),
controls = r.set(
r.path(path2).attr({
stroke: "#000000",
id: 'path'
}), r.circle(x, y, 6).attr({
fill: "#ff0000",
stroke: "none",
id: "cir1"
}), r.circle(ax, ay, 6).attr({
fill: '#ff0000',
stroke: 'none',
'id': 'cir2'
}), r.circle(bx, by, 6).attr({
fill: "#ff0000",
stroke: "none",
id: "cir3"
}), r.circle(zx, zy, 6).attr({
fill: "#ff0000",
stroke: "none",
id: "cir4"
}));
t = false;
controls[1].update = function(x, y) {
var X = this.attr("cx") + x,
Y = this.attr("cy") + y;
this.attr({
cx: X,
cy: Y
});
path[0][1] = X;
path[0][2] = Y;
path2[0][1] = X;
path2[0][2] = Y;
t = false;
controls[2].update(x, y);
};
controls[2].update = function(x, y) {
var X = this.attr("cx") + x,
Y = this.attr("cy") + y;
this.attr({
cx: X,
cy: Y
});
path[1][1] = X;
path[1][2] = Y;
path2[1][1] = X;
path2[1][2] = Y;
t = false;
curve.attr({
path: path
});
controls[0].attr({
path: path2
});
};
controls[3].update = function(x, y) {
var X = this.attr("cx") + x,
Y = this.attr("cy") + y;
this.attr({
cx: X,
cy: Y
});
path[1][3] = X;
path[1][4] = Y;
path2[2][1] = X;
path2[2][2] = Y;
t = false;
curve.attr({
path: path
});
controls[0].attr({
path: path2
});
};
controls[4].update = function(x, y) {
var X = this.attr("cx") + x,
Y = this.attr("cy") + y;
this.attr({
cx: X,
cy: Y
});
path[1][5] = X;
path[1][6] = Y;
t = false;
path2[3][1] = X;
path2[3][2] = Y;
controls[3].update(x, y);
};
controls.drag(move, up);
t = false;
}
function move(dx, dy) {
this.update(dx - (this.dx || 0), dy - (this.dy || 0));
this.dx = dx;
this.dy = dy;
t = false;
}
function up() {
this.dx = this.dy = 0;
t = false;
}
// curve(70, 100, 80, 100, 130, 154, 170, 200, "hsb(0, .75, .75)");
curve(100, 100, 100, 100, 100, 100, 100, 100, "#ff0000");
});
I am trying to add an id to each circle, but it is not working for some reason.

Answer 1

You can add miscellaneous data, like a custom ID, using the element.data() function. Your circle code snippet could be the following:
r.circle(x, y, 6).attr({
fill: "#ff0000",
stroke: "none"
}).data("id", "cir1"),