0

この円グラフを変更しようとしています。これにより、セグメントをクリックしても、異なるセグメントの色が変更されません。塗りつぶしはセグメントの形状と直接的な関係があるように見えますが、私は完全に吸います。助けてください！ここで実際の円グラフを見ることができます：

http://raphaeljs.com/growing-pie.html

function drawgrowingpie () {
    var r = Raphael("holder");

    r.customAttributes.segment = function (x, y, r, a1, a2) {
        var flag = (a2 - a1) > 180,
            clr = (a2 - a1) / 360;
        a1 = (a1 % 360) * Math.PI / 180;
        a2 = (a2 % 360) * Math.PI / 180;
        return {
            path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]],
            fill: "hsb(" + clr + ", .75, .8)"
        };
    };

    function animate(ms) {
        var start = 0,
            val;
        for (i = 0; i < ii; i++) {
            val = 360 / total * data[i];
            paths[i].animate({segment: [200, 200, 150, start, start += val]}, ms || 1500, "bounce");
            paths[i].angle = start - val / 2;
        }
    }

    var data = [24, 92, 24, 52, 78, 99, 82, 27],
        paths = r.set(),
        total,
        start,
        bg = r.circle(200, 200, 0).attr({stroke: "#fff", "stroke-width": 4});
    data = data.sort(function (a, b) { return b - a;});

    total = 0;
    for (var i = 0, ii = data.length; i < ii; i++) {
        total += data[i];
    }
    start = 0;
    for (i = 0; i < ii; i++) {
        var val = 360 / total * data[i];
        (function (i, val) {
            paths.push(r.path().attr({segment: [200, 200, 1, start, start + val], stroke: "#fff"}).click(function () {
                total += data[i];
                data[i] *= 2;
                animate();
            }));
        })(i, val);
        start += val;
    }
    bg.animate({r: 151}, 1000, "bounce");
    animate(1000);
};
4

1 に答える 1

0

変化する

return {
    // snip...
    fill: "hsb(" + clr + ", .75, .8)"
};

他の何かに移動するかfill、返されたオブジェクトからプロパティを完全に削除します。

これが正しい方向への微調整です。スライスがアニメーション化されるたびに色を変更する代わりに、色がsegment関数に渡されるようになりました。これは、2つの異なる呼び出し元（初期化子とクリックハンドラー）が異なる色を制御できることを意味します。segment関数は、（色）が渡されなかった場合に情報を返さないように変更されています。 これは、初期化コードのみが色情報を渡すため、ハンドラーによって色が変更されないことを意味します。fillclrclick

うまくいけば、これはあなたにとって理にかなっています。

function drawgrowingpie() {
    var r = Raphael("holder");
                                                        // ↓↓↓ pass the color
    r.customAttributes.segment = function(x, y, r, a1, a2, clr) {
        var flag = (a2 - a1) > 180;
        a1 = (a1 % 360) * Math.PI / 180;
        a2 = (a2 % 360) * Math.PI / 180;
        var props = {
            path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]]
        };

        // only return fill properties if the color was passed
        if (clr) {
            props.fill = "hsb(" + clr + ", .75, .8)";
            console.log(clr);
        }
        return props;
    };

    function animate(ms) {
        var start = 0,
            val;
        for (i = 0; i < ii; i++) {
            val = 360 / total * data[i];
            paths[i].animate({
                // notice that no color data is passed here...
                segment: [200, 200, 150, start, start += val]
            }, ms || 1500, "bounce");
            paths[i].angle = start - val / 2;
        }
    }

    var data = [24, 92, 24, 52, 78, 99, 82, 27],
        paths = r.set(),
        total, start, bg = r.circle(200, 200, 0).attr({
            stroke: "#fff",
            "stroke-width": 4
        });
    data = data.sort(function(a, b) {
        return b - a;
    });

    total = 0;
    for (var i = 0, ii = data.length; i < ii; i++) {
        total += data[i];
    }
    start = 0;
    for (i = 0; i < ii; i++) {
        var val = 360 / total * data[i];
        (function(i, val) {
            paths.push(r.path().attr({
                // ...but we do pass color data here      ↓↓↓↓  
                segment: [200, 200, 1, start, start + val, val],
                stroke: "#fff"
            }).click(function() {
                total += data[i];
                data[i] *= 2;
                animate();
            }));
        })(i, val);
        start += val;
    }
    bg.animate({
        r: 151
    }, 1000, "bounce");
    animate(1000);
}

http://jsfiddle.net/mattball/xsfQj/

于 2012-04-21T04:59:28.420 に答える