3

私はこの質問がラファエルグーグルグループで尋ねられるのを見ました、しかしそこで何時間も検索した後、そしてまたこことグーグルで、私は解決策を見つけることができないようです。

jQueryを使用して円グラフ（svgパス）スライスをターゲットにできるようにしたいのですが、パスタグにカスタムIDを追加する方法がわかりません-デフォルトではID属性はありません：

<path fill="#764c29" stroke="none" d="M350,350L350.6911881148345,94.00093308961084A256,256,0,0,1,561.8463375189659,206.2741175716762Z" style="stroke-width: 1; stroke-linejoin: round;" stroke-width="1" stroke-linejoin="round"/>

理想的なのはこれです：

<path **id="my_id"** fill="#764c29" stroke="none" d="M350,350L350.6911881148345,94.00093308961084A256,256,0,0,1,561.8463375189659,206.2741175716762Z" style="stroke-width: 1; stroke-linejoin: round;" stroke-width="1" stroke-linejoin="round"/>

誰かがこれをどのように達成できるか考えていますか？

これは、円グラフを作成するために使用しているコードです。

window.onload = function () {
var r = Raphael("holder");


var pie = r.g.piechart(350, 350, 256, [56, 104, 158, 23, 15, 6]);

pie.hover(function () {
    this.sector.stop();
    this.sector.animate({scale: [1.1, 1.1, this.cx, this.cy]}, 500, "bounce");

    }, function () {
        this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
    });

};

基本的に、これを実行できるようにする必要がある理由は、上記のスケールアニメーションを実行するために、いくつかの個別のアンカートリガーを作成できるようにするためです。

どんな助けでも大歓迎です。

4

1 に答える 1

5

円グラフオブジェクトは、セクターに到達するための3つの方法を提供します。

1）各機能

pie.each(function(sector, cover, i) {
 sector.attr({/*...*/}); //raphael
 $(sector.node).foo(); //jquery
});

2）シリーズオブジェクト（スタイリングおよび変換用）

var i = 0; // 0 = 56, 1 = 104, 2 = 158 …

//raphael way to hide the first sector
pie.series.items[i].attr({ opacity : 0 });  

//jquery way to hide the first sector
$(pie.series.items[i].node).hide();

これにより、iはデータ配列のインデックスになります

デモ： http： //jsbin.com/eriqa5/2/edit

3）オブジェクトをカバーします（マウスおよびタッチイベント用）

//raphael way to hover the first sector
pie.covers.items[0].hover(...);

//jquery way to hover the first sector
$(pie.covers.items[0].node).hover(...);

デモ： http： //jsbin.com/eriqa5/4/edit

于 2011-04-27T11:45:12.410 に答える