拉斐尔甜甜圈图表单击和取消单击部分

Question

我是一个新手，但我正在尝试创建一个圆环图，其中的部分在单击时会放大，然后当单击不同的部分时，第一部分会恢复到原始大小，而新部分会放大。

我有图表和点击缩放，但现在我只能通过鼠标悬停让该部分恢复到原始大小。

这是我的代码：

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

小提琴：http://jsfiddle.net/dll416/70twey1o/1/

Answer 1

重要的是能够从点击侦听器函数中选择所有其他扇区和文本标签。

我创建了一个示例，它通过为每个扇区和文本标签分配一个类来实现您正在寻找的内容，并使用这些类来执行“隐藏”动画：http://jsfiddle.net/8opkfpxs/4/

设置类：

p.node.setAttribute('class', 'sector');
txt.node.setAttribute('class', 'sectorTxt');

点击扇区时访问类：

        p.click(function (e) {
            donut.forEach(function(element) {
                var className = element.node.getAttribute('class');
                if(className === 'sector') {
                    element.stop().animate({transform: ""}, ms, "elastic");   
                }
                else if(className === 'sectorTxt') {
                    element.stop().animate({opacity: 0}, ms);   
                }
            });
            p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
            txt.stop().animate({opacity: 1}, ms, "elastic");                    
        });

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

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

Answer 2

移除 mouseOut 功能，在应用变换 onClick 之前重置整个变换和属性更改，也将图表集分成 2。 我还建议您在数组中绘制每个图表。

我只是更改了这些行：

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

http://jsfiddle.net/crockz/m4tcr4tg/