Raphael JS Pie:向路径切片添加ID [英] Raphael JS Pie: Add ID to path slices
问题描述
我已经在Raphael Google网上论坛上看到了这个问题,但是经过数小时的搜索以及在这里和Google的搜索之后,我似乎找不到解决方法.
I've seen this question asked over at the Raphael Google Groups, but after hours of searching there, and also on here, and Google, I cannot seem to find a solution.
我只是希望能够使用jQuery定位我的饼图(svg路径)切片,但我无法弄清楚如何向路径标签添加自定义ID-默认情况下,其中没有ID属性:>
I would simply like to be able to target my pie chart (svg path) slices using jQuery, but I cannot figure out how to add custom id's to the path tags - there is no ID attribute in there by default:
<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"/>
有人知道如何实现吗?
这是我用来创建饼图的代码:
This is the code I'm using to create the pie chart:
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");
});
};
基本上,我需要能够执行此操作的原因是,我可以创建一些单独的锚点触发器来执行上面显示的缩放动画.
Essentially, the reason I need to be able to do this, is so I can create some separate anchor triggers to perform the scale animations shown above.
任何帮助都将不胜感激.
Any help greatly appreciated.
推荐答案
饼图对象提供了三种到达其扇区的方法.
the piechart object provides 3 ways to reach their sectors.
1)每个功能
pie.each(function(sector, cover, i) {
sector.attr({/*...*/}); //raphael
$(sector.node).foo(); //jquery
});
2)系列对象(用于样式和变换)
2) series object (for styling and transforming)
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是您数据数组的索引
whereby i is the index of your data-array
演示: http://jsbin.com/eriqa5/2/edit
3)涵盖对象(用于鼠标和触摸事件)
3) covers object (for mouse and touch events)
//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
这篇关于Raphael JS Pie:向路径切片添加ID的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!