Raphael JS Pie：将 ID 添加到路径切片

发布于 2024-11-03 16:19:46 字数 1246 浏览 4 评论 0原文

我在 Raphael Google Groups 上看到过这个问题，但是经过几个小时的搜索，以及这里和 Google，我似乎找不到解决方案。

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

};

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

非常感谢任何帮助。

原文

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.

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"/>

What would be ideal would be this:

<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"/>

Has anyone got an idea how this could be achieved?

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

允世 2024-11-10 16:19:47

饼图对象提供了 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

the piechart object provides 3 ways to reach their sectors.

1) each function

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

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();

whereby i is the index of your data-array

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

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(...);

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

回复收藏 0 原文

~没有更多了~