javascript - Raphaël 圆环图单击和取消单击部分

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

fiddle :http://jsfiddle.net/dll416/70twey1o/1/

Answer 1

重要的是能够从点击监听器功能中选择所有其他部分和文本标签。

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

设置类(class):

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