Raphael JS饼图：为路径切片添加ID

Question

Raphael JS饼图：为路径切片添加ID

3

我在Raphael Google Groups上看到了这个问题，但经过数小时的搜索，包括在这里和谷歌上，我似乎找不到解决方案。

我希望能够使用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");
    });

};

本质上，我需要能够这样做的原因是，我可以创建一些单独的锚点触发器来执行上面显示的缩放动画。

非常感谢任何帮助。

- Jamie

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- basecode · Accepted Answer

饼图对象提供了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(...);

demo: http://jsbin.com/eriqa5/4/edit