Javascript Raphaël甜甜圈图表单击并取消单击部分

我是这方面的新手，但我正在尝试创建一个甜甜圈图表，该图表中的部分在单击时缩放得更大，然后当单击另一个部分时，第一个部分将返回到原始大小，而新的部分将缩放得更大

我有图表和缩放点击，但现在我只能让部分返回到原来的大小与鼠标

这是我的代码：

 p.click(function () {
            p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
            txt.stop().animate({opacity: 1}, ms, "elastic");
        }).mouseout(function () {
            p.stop().animate({transform: ""}, ms, "elastic");
            txt.stop().animate({opacity: 0}, ms);
        });

---

Fiddle:

重要的是能够从click listener函数中选择所有其他扇区和文本标签

我创建了一个示例，通过为每个扇区和文本标签分配一个类，并使用这些类来执行隐藏动画，从而实现了您想要的效果：

设置课程：

单击扇区时访问类：

您还需要将Raphael上下文存储在一个变量中（在上面的示例中为donut），以便能够在click侦听器中使用forEach函数

donut = Raphael("holder", 700, 700).donutChart(350, 350, 200, 50, values, labels, "#fff");

---

删除mouseOut函数，在应用转换之前，单击重置整个集合转换和属性更改，并将图表集分隔为2。 我还建议您在数组中绘制每个图表

我刚刚更改了这些行：

chartTxt = this.set(),
chart = this.set();

及

及

---

这很有效。我还有几个问题，如何添加悬停状态呢。我希望悬停可以改变填充，并在未悬停时恢复为原始填充，然后单击剖面缩放。此外，我现在在剖面上有文本，如果鼠标悬停在文本上，则单击不起作用-仅当您在没有文本的位置单击时才起作用。无论你是否在文本上，有没有办法让点击发生@Dab0416您可以使用mouseover和mouseout事件侦听器添加悬停状态。至于文本，如果添加了单击事件和悬停事件并找到要设置动画的相关扇区，则还需要将它们与单击事件和悬停事件连接起来。您可能需要找到文本的索引，并使用该索引在类扇区的扇区数组中进行搜索。最后一个问题-是否有方法在一个已展开的分区中加载图表？此方法也有效。我喜欢它，因为它对像我这样的新手来说更容易理解，但我接受了另一个答案，因为在测试这个答案时，我注意到，如果你足够快地点击不同的部分，你可以使它同时突出显示两个部分，这不符合我的目的。谢谢你的帮助！没关系，我只是想回答你的问题Raphaël油炸圈饼图表尽可能简单地点击和松开部分，因为我不知道你的图表的用途。对你来说，最好的解决方案很可能与我的建议相反。作为一个脚注，请记住，您可以使用css填充、笔划、覆盖和输出等控制内联svg，并按照您在Athms回答后编写的代码，尝试将按钮和文本放在同一集中，或在动画顶部绘制不可见的按钮。啊！我用css:hover将鼠标悬停在原来的图表上，在上面添加了一个不可见的图表，并为其指定了单击功能。谢谢你的提示！

donut = Raphael("holder", 700, 700).donutChart(350, 350, 200, 50, values, labels, "#fff");

chartTxt = this.set(),
chart = this.set();

p.click(function () {
    chart.transform("");
    chartTxt.attr({opacity: 0});
    this.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
    txt.stop().animate({opacity: 1}, ms, "elastic");
});

chart.push(p);
chartTxt.push(txt);