Question

我正试图用Raphael制作一个阻力曲线。

请查找：

 r.circle(x, y, 6).attr({
                fill: "#ff0000",
                stroke: "none",
                id: "cir1"
            }),

这是我的代码：

$(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");
});

我正在尝试为每个圈子添加id，但由于某种原因它无效。

Answer 1

您可以使用element.data() function添加杂项数据，例如自定义ID。您的圈子代码段可能如下：

r.circle(x, y, 6).attr({
    fill: "#ff0000",
    stroke: "none"
}).data("id", "cir1"),

添加ID到Raphael圈子

1 个答案: